想实现点击列表的某个row 选中状态 改变背景色 再点击这个项时取消
可是这是dom渲染后的真实dom 操作的是真实dom 能使用setState么
实现思路是什么样的
有何不可,给你个简单例子:
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')
);