Изменить цвет выбранного элемента - Реагировать

Question

Я новый, чтобы реагировать. Я пытаюсь изменить цвет одного определенного «ли», который был выбран, но вместо этого он меняет цвет всех «ли».

Также при нажатии на другое «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>