更改所选元素的颜色 - 反应

Question

我是 React 的新手。我正在尝试更改所选一个特定"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

由于列表项上没有任何标识符，因此每次都会激活/停用它们。您需要以不同的方式引用它们中的每一个，然后您可以单独设置颜色。这是一个例子

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>