在状态更改 React js 时更新 ClassNames答案

【问题标题】：Update ClassNames on State change React js在状态更改 React js 时更新 ClassNames
【发布时间】：2020-09-28 21:32:46
【问题描述】：

有没有办法在状态更改时更新 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} \>
    );
...

【问题讨论】：

你要更新什么吗？是的，你可以
当我按下按钮时 state.active 正在更新但 'activeClass' 不是

标签： css reactjs classname

【解决方案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,
      })}
    />
  );
}

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：