Question

我正在尝试动态更改元素的类名称，但未成功。这是我的尝试

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>
   )
}

有什么建议吗？

Answer 1

您可以拥有一个状态变量，该状态变量包含您在render方法中使用的className字符串，而不是在您的状态下存储JSX。 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>

Answer 2

假设您使用的是最新版本的React，请参阅以下解决方案：

https://codesandbox.io/s/5kkwqvvopk?codemirror=1&fontsize=14

编辑：如果您没有使用最新版本的react，并且不能使用钩子，请确保您的react组件是一个类，并使用this.setState存储所需的类名。

Answer 3

这里有很多问题。

1）您将立即在onClick中调用您的功能。将对此进行评估-您需要确保传递给onClick的是函数，而不是函数的调用。

2）changeClass名称不会绑定到该类所在的实例。当您最终通过单击按钮来调用它时，this不会是您所期望的，因此{ {1}}不太可能起作用。如果您使用的是create-react-app，则可以使用语法之类的箭头功能来解决此问题。

3）您不能像这样更改JSX元素的className-最好将其插入Javascript中以供编译器处理。

这是一个可能的解决方案：

setState

更改元素的类名称

3 个答案: