在状态更改时更新 ClassNames React js

Question

有没有办法在状态更改时更新 classNames var（在本例中 'btClasses'）？

...
    state = {
       active: true
    };

    btClasses = classNames({
      'main-class': true,
      'activeClass': this.state.active
    });

    _handleBtn = () => {
       this.setState({active: !this.state.active});
    } 

    return (
        <button 
           onClick={this._handleBtn} 
           className={btClasses} \>
    );
...

Answer 1

当前实现中的 btClasses 在第一次渲染后不会更新。要用当前状态计算它的值，你可以把 btClasses 变成一个函数：

class MyComponent extends React.Component {
  state = {
    active: true,
  };

  btClasses = () =>
    classNames({
      'main-class': true,
      activeClass: this.state.active,
    });

  _handleBtn = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    return <button onClick={this._handleBtn} className={this.btClasses()} />;
  }
}

或简单地内联它：

render() {
  return (
    <button
      onClick={this._handleBtn}
      className={classNames({
        'main-class': true,
        activeClass: this.state.active,
      })}
    />
  );
}

Answer 2

目前，您初始化 className 一次，通常，您将其传递为属性:

class App extends React.Component {
  state = {
    active: true
  };

  handleBtn = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    return (
      <button
        onClick={this.handleBtn}
        className={classNames({
          "main-class": true,
          activeClass: this.state.active
        })}
      >
        {this.state.active ? "true" : "false"}
      </button>
    );
  }
}

在状态更改时更新 ClassNames React js

Update ClassNames on State change React js

css

classname

reactjs