如何在 ReactJS 中添加或删除事件的类名？

Question

我是 React 的新手，我在将我的想法从标准 js 转换过来时遇到了一些困难。

在我的反应组件中，我有以下元素：

 <div className='base-state' onClick={this.handleClick}>click here</div>

我正在寻找的行为是在点击时添加一个额外的类。我的第一个想法是尝试在点击处理函数中添加类，例如

handleClick : function(e) {
   <add class "click-state" here>
}

我还没有找到任何类似的例子，所以我很确定我没有以正确的方式考虑这个问题。

谁能指出我正确的方向？

原文由 Finglish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

类列表可以从组件的状态派生。例如：

 var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

调用 this.setState 将触发组件的重新渲染。

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以只使用 Vanilla JS（ event.target 和 classList ）：

 handleClick = event => event.target.classList.add('click-state');

render() {
  return <div className="base-state" onClick={this.handleClick}>Click here</div>;
}

但是不要那样做！

React 应该处理 DOM 中的变化，因此依赖于通过 React 修改 CSS 类。

事件目标

元素类列表

反应/样式和 CSS

原文由 Adrian Bienias 发布，翻译遵循 CC BY-SA 4.0 许可协议