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

Question

我对 React 还是很陌生，我在将我的想法从标准 js 转换过来时有点挣扎。

在我的 react 组件中，我有以下元素:

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

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

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

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

谁能指出我正确的方向？

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将触发组件的重新渲染。