时间戳

首页 > 解决方案 > 更改元素的类名

javascript - 更改元素的类名

问题描述

我试图动态更改元素的类名但未成功。这是我的尝试

this.state = {
   element: [<div className="changeMe"></div>]     
}

changeClassName(){
    let tmp = this.state.element[0]

    tmp.className="new class name"


   this.setState({element[0]: tmp})
}

render(){
   return(

    <Button onClick={this.changeClassName()}>Change the class name</Button>
   )
}

有什么建议么？

标签： javascriptreactjs

解决方案

除了将 JSX 存储在您的状态中，您还可以拥有一个包含您className在渲染方法中使用的字符串的状态变量。changeClassName然后将只负责更改此字符串的状态。

例子

class App extends React.Component {
  state = {
    className: "changeMe"
  };

  changeClassName = () => {
    this.setState(prevState => ({
      className: prevState.className === "changeMe" ? "newClassName" : "changeMe"
    }));
  };

  render() {
    const { className } = this.state;

    return (
      <div className={className}>
        <button onClick={this.changeClassName}>
          Change the class name ({className})
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

推荐阅读