Reactjs 如何在 React.js 中将 onClick 与 div 一起使用

这很管用

var Box = React.createClass({
    getInitialState: function() {
        return {
            color: 'white'
        };
    },

    changeColor: function() {
        var newColor = this.state.color == 'white' ? 'black' : 'white';
        this.setState({ color: newColor });
    },

    render: function() {
        return (
            <div>
                <div
                    className='box'
                    style={{background:this.state.color}}
                    onClick={this.changeColor}
                >
                    In here already
                </div>
            </div>
        );
    }
});

ReactDOM.render(<Box />, document.getElementById('div1'));
ReactDOM.render(<Box />, document.getElementById('div2'));
ReactDOM.render(<Box />, document.getElementById('div3'));

在你的css中，删除你拥有的样式并把它

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  float: left;
}

你必须设计你打onClick的实际div.给div一个类名，然后设置样式.另外，请记住，如果要将App渲染到dom中，请删除此块，因为应用程序未定义

ReactDOM.render(<App />,document.getElementById('root'));