这有效

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;
}

您必须设置您正在调用的实际 div 的样式onClick。给 div 一个 className，然后设置它的样式。还记得把你渲染App到dom的这个块去掉，App没有定义

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

对于未来的谷歌人（数千人现在已经用谷歌搜索了这个问题）：

为了让您放心，该onClick事件确实与react中的 div 一起工作，因此请仔细检查您的代码语法。

这些是对的：

<div onClick={doThis}>
<div onClick={() => doThis()}>

这些是错误的：

<div onClick={doThis()}>
<div onClick={() => doThis}>

（不要忘记关闭你的标签......注意这一点：

<div onClick={doThis}

div 上缺少结束标记）

你的盒子没有尺寸。如果您设置宽度和高度，它就可以正常工作：

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

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

    render: function() {
        return (
            <div>
                <div
                    style = {{
                        background: this.state.color,
                        width: 100,
                        height: 100
                    }}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

ReactDOM.render(
  <Box />,
  document.getElementById('box')
);

<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='box'></div>

以下代码现在有效！！！

const test = () => {
const onClick = () => console.log('hi');

return (
<div onClick={onClick} aria-hidden="true">
  Content here
</div>
)};