改變選定元素的顏色 - 反應

Question

我是新來的React。 我試圖改變一個特定的「李」被選中的顏色，但它改變了所有「李」的顏色。

另外，當點擊另一個「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

既然你沒有任何標識你列出您激活/項的所有每次停用它們。您需要以不同的方式引用它們中的每一個，然後您可以單獨設置顏色。這是一個例子

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>