ボタンにアクティブなクラスを追加するReactJs

Question

私は5つのボタンを動的に作成しました。私の目標は、アクティブなクラスを追加するためにどのボタンがクリックされたか、それを削除するアクティブなクラスを持っている他のボタンがある場合です。それをどうすれば実現できますか？

<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> 

イベントハンドラ（要素法）：renderメソッドの出力例のためにより、アクティブクラスを追加する最も簡単な方法の

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> 
    } 
}); 

が、これはあなたを助けることを願っています！