更改所选元素的颜色-React

小编典典

更改所选元素的颜色-React

reactjs

我是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')
);

阅读 235

2020-07-22

共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>

2020-07-22