我是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') );
由于列表项上没有任何标识符,因此您每次都激活/停用它们。您需要以不同的方式引用它们中的每个,然后可以分别设置颜色。这是一个例子
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>