：ループ状態の反応コンポーネントの選択状態

Question

私はループ内でレンダリングしているdivで個々の選択状態を基本的に実行したいと考えています。レンダリングされたすべてのdivの色を変更する方法しか見ることはできませんが、クリックした色を変更したいと考えています。以下はループのコードです。

renderSports() { 
    const {sports} = this.props 
    return sports.valueSeq().map(sport => this.renderActualSports(sport)) 
    }, 

    renderActualSports(sport) { 
    const {sportCount} = this.props 
    return (
     <div className="sportSeparator"> 
     {sport} {this.renderCount(sportCount.get(sport))} 
     </div> 
    ) 
    }, 

これは基本的にスポーツのリストをレンダリングします。選択したスポーツの色をクリックして変更します。

Answer 1

コンポーネント状態でクリックしたアイテムを保存する必要があります。あなたは、これがthis.state.highlighted内の項目を強調表示し、あなたのスポーツの変数が文字列または数値であることを格納しますと仮定すると、

：

renderActualSports(sport) { 
    const {sportCount} = this.props 
    return (
     <div 
     className="sportSeparator" 
     onClick={this.highlight(sport)} 
     style={{color: this.state.highlighted.indexOf(sport) > -1 && 'red' : ''}} 
     > 
     {sport} {this.renderCount(sportCount.get(sport))} 
     </div> 
    ) 
    }, 

    highlight(sport) { 
    return() => { 
     this.setState({highlighted: [...this.state.highlighted, sport]}); 
    } 
    } 

だから、何をやっていることはdivの上のonClickであるあなたがthis.state.highlighted配列にそのスポーツを追加し、リストを表示するとき。そのスポーツが配列内にあるかどうかをチェックし、そうであればインラインスタイルを使って色を変更します