Question

所以我将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;

Answer 1

还有一个更简单的选择：

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

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

  changeClass = () => {
    this.setState({className: "second"});
  };

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

export default App;

Answer 2

不要将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;

Answer 3

如果您使用的React版本高于16.8，则可以使用Hooks

With Range("O2", Range("O2").End(xlDown).End(xlToRight)).Sort
    .SortFields.Clear
    .SortFields.Add2 Key:=Range("O2"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:=xlSortNormal
    .SortFields.Add2 Key:=Range("P2"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:=xlSortNormal
    'and so on … add your other fields here
    .Header = xlNo
    .Apply
End With

如何更改className？

3 个答案: