时间戳

首页 > 解决方案 > 如何更改类名？

javascript - 如何更改类名？

问题描述

所以我将 div 元素保持在我的状态。我想改变它className以响应onClick事件。我知道我可以这样做，event.target.className但下面的代码只是一个最大应用程序的示例，不可能在那里使用它。作为changeClass函数的结果，我得到

“TypeError：无法分配给对象'#'的只读属性'className'”。

所以我想知道有没有其他方法可以做到这一点？

    import React, { Component } from "react";
    import "./styles/style.css";

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          myDiv: [
            <div
              id="firstDiv"
              key={1}
              className={"first"}
              onClick={this.changeClass}
            />
          ]
        };
      }


  changeClass = () => {
    this.setState(prevState => {
      return { myDiv: (prevState.myDiv[0].props.className = "second") };
    });
  };


      render() {
        return <div>{this.state.myDiv.map(div => div)}</div>;
      }
    }

    export default App;

标签： javascriptreactjs

解决方案

不要将您的 jsx 置于状态。只添加 className 和 state 和 onChangeClass 使用 this.stateState 来更新 className。

import React, { Component } from "react";
import "./styles/style.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      className:"first"
    };
  }

  changeClass = () => {
     this.setState({ classNmae: "two" }); 
  };

  render() {
    return <div>
       <div
          id="firstDiv"
          className={this.state.className}
          onClick={this.changeClass}
       />
    </div>;
  }
}

export default App;

推荐阅读