反応の中のコンポーネントにCSSクラスを追加するには？

Question

基本的に私がやっていることは、一連のデータを繰り返し、何らかのリストを作ることです。私がここで達成したいのは、CSSクラスが添付されるべき特定のリスト項目をクリックすることです。私はをクリックするようにhandleClickをどうするかを把握することはできませんよリスト

var sports = allSports.sportList.map((sport) => { 
return (
    <SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/> 
) 
}) 

単一のリスト項目

<div className="display-type icon-pad "> 
     <div className="icons link"> 
     <img className="sport-icon" src={icon}/> 
     </div> 
     <p className="text-center">{text}</p> 
    </div> 

を作るために

イテレーション特定のリストが強調表示されます。

Answer 1

選択可能なすべての項目に対して別々のstate変数を保存し、としてクラスを条件付きで操作するにはclassnamesライブラリを使用します。

編集：いいえ、一度に1つの要素しか選択できないことに言及しました。つまり、選択された要素の1つを保存するだけです（選択した項目のIDを使用します）。そしてまた、私はあなたのコードのタイプミスを気づいた、あなたがコンポーネントを宣言するときに、関数をリンクする必要があり、それは

<SportItem onClick={this.handleClick} ... 

（​​は、もはや()が含まれている様子がわかりません）を呼び出しません。

そして今、我々はpartial application使用​​ハンドラにイベントと一緒に要素のidを渡すつもりだ - bind方法：

<SportItem onClick={this.handleClick.bind(this,sport.id} ... 

そして、私は我々が選択した項目のidを保存したいと述べたように状態、​​は次のようになりことができるように：

handleClick(id,event){ 
this.setState({selectedItemId: id}) 
... 
} 

今、私たちは、彼らが現在の選択を意識しているようselectedItemIdSportItemにインスタンスを渡す必要があります：012あなたが特定のリストを強調したい場合は

<div onClick={this.props.onClick} className={classNames('foo', { myClass: this.props.selectedItemId == this.props.key}); // => the div will always have 'foo' class but 'myClass' will be added only if this is the element that's currently selected}> 
</div> 

Answer 2

：.Alsoは、親の中で状態の変化をトリガするために起こっている、それがために必要がある場合にonClick={this.handleClick}コールバック、呼び出しを添付することを忘れないでください項目は、リスト項目自体に​​関数を呼び出すために良い方法だし、あなたがこのアプローチをより正確にCSSクラスを追加することができ、

ここでは私のサンプルコードでは、まあ、それを単一のリストコンポーネント

var SingleListItem = React.createClass({ 
getInitialState: function() { 
    return { 
     isClicked: false 
    }; 
}, 
handleClick: function() { 
    this.setState({ 
     isClicked: true 
    }) 
}, 
render: function() { 
    var isClicked = this.state.isClicked; 
    var style = { 
     'background-color': '' 
    }; 
    if (isClicked) { 
     style = { 
      'background-color': '#D3D3D3' 
     }; 
    } 
    return (
     <li onClick={this.handleClick} style={style}>{this.props.text}</li> 
    ); 
    } 
});