選択したエレメントの色を変更します - 反応

Question

私は反応するのが初めてです。 選択した特定の「li」の色を変更しようとしていますが、代わりにすべての「li」の色が変わります。

また別の「li」をクリックしたときに、最初の「i」が再びアクティブにならないようにします。あなたは上の任意の識別子を使用して、それらをすべてのたびに有効/無効にする項目をリスト持っていませんのでhttp://codepen.io/polinaz/pen/zNJKqO

var List = React.createClass({ 
    getInitialState: function(){ 
    return { color: ''} 
    }, 
    changeColor: function(){ 
    var newColor = this.state.color == '' ? 'blue' : ''; 
    this.setState({ color : newColor}) 
    }, 

    render: function() { 
    return (
     <div> 
     <li style={{background:this.state.color}} onClick={this.changeColor}>one</li> 
     <li style={{background:this.state.color}} onClick={this.changeColor}>two</li> 
     <li style={{background:this.state.color}} onClick={this.changeColor}>three</li> 


     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <List/>, 
    document.getElementById('app') 
); 

Answer 1

：ここ

はコードです。異なる方法でそれぞれを参照する必要があります。次に、個別に色を設定することができます。これは、1つの例

var List = React.createClass({ 
 
    getInitialState: function(){ 
 
    return { active: null} 
 
    }, 
 

 
    toggle: function(position){ 
 
    if (this.state.active === position) { 
 
     this.setState({active : null}) 
 
    } else { 
 
     this.setState({active : position}) 
 
    } 
 
    }, 
 
    
 
    myColor: function(position) { 
 
    if (this.state.active === position) { 
 
     return "blue"; 
 
    } 
 
    return ""; 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div> 
 
     <li style={{background: this.myColor(0)}} onClick={() => {this.toggle(0)}}>one</li> 
 
     <li style={{background: this.myColor(1)}} onClick={() => {this.toggle(1)}}>two</li> 
 
     <li style={{background: this.myColor(2)}} onClick={() => {this.toggle(2)}}>three</li> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 
ReactDOM.render(
 
    <List/>, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"> 
 
    <!-- This div's content will be managed by React. --> 
 
</div>