ReactJs将活动类添加到按钮

Question

我有五个按钮，动态创建。我的目标是：当点击任何按钮向其添加活动类时，当然还有任何其他按钮具有要删除它的活动类。我怎样才能做到这一点？

<div>
    {buttons.map(function (name, index) {
        return <input type="button" value={name} onClick={someFunct} key={ name }/>;
   })}
</div>

Answer 1

您需要将状态引入组件并在onClick事件处理程序中进行设置。例如，渲染方法的输出：

<div>
    {buttons.map(function (name, index) {
        return <input
                 type="button"
                 className={this.state.active === name ? 'active' : ''}
                 value={name}
                 onClick={() => this.someFunct(name)}
                 key={ name } />;
   })}
</div>

事件处理程序（元素方法）：

someFunct(name) {
    this.setState({ active: name })
}

Answer 2

添加活动类的最简单方法之一是设置状态并在每个开关上更改该状态，通过状态值可以更改项的活动类。

我在切换列表中的活动类时遇到了同样的问题。

示例：

var Tags = React.createClass({
  getInitialState: function(){
    return {
      selected:''
    }
  },
  setFilter: function(filter) {
    this.setState({selected  : filter})
    this.props.onChangeFilter(filter);
  },
  isActive:function(value){
    return 'btn '+((value===this.state.selected) ?'active':'default');
  },
  render: function() {
    return <div className="tags">
      <button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
      <button className={this.isActive('male')} onClick={this.setFilter.bind(this, 'male')}>male</button>
      <button className={this.isActive('female')} onClick={this.setFilter.bind(this, 'female')}>female</button>
      <button className={this.isActive('child')} onClick={this.setFilter.bind(this, 'child')}>child</button>
      <button className={this.isActive('blonde')} onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
     </div>
  }
});

希望这会对你有帮助！