react 选中列表的某项并改变背景色的实现思路？

Question

想实现点击列表的某个row 选中状态 改变背景色 再点击这个项时取消
可是这是dom渲染后的真实dom 操作的是真实dom 能使用setState么
实现思路是什么样的

Answer 1

有何不可，给你个简单例子：

jsFiddle

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

var Hello = React.createClass({
  getInitialState: function() {
    return {checked: false};
  },
  render: function() {
    var rowStyle = {
        backgroundColor: this.state.checked ? 'blue' : 'transparent'
    };
    console.log(rowStyle);
    return <div onClick={this.handleClick} style={rowStyle}>Hello {this.props.name}</div>;
  },
  
  handleClick: function(){
      this.setState({
          checked: !this.state.checked
      });
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);