如何在React.js中使用带有div的onClick

Question

我正在制作一个非常简单的应用程序,您可以单击方形div来将其颜色从白色更改为黑色.但是,我遇到了麻烦.我想使用onClick函数允许用户点击一个方块来改变它的颜色,但它似乎不起作用.我尝试过使用跨度和空p标签,但这也不起作用.

这是有问题的代码:

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
                    style = {{background: this.state.color}}
                    onClick = {this.changeColor}
                >
                </div>
            </div>
        );
    }
});

这是我在CodePen上的小项目的链接. http://codepen.io/anfperez/pen/RorKge

Answer 1

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

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

这些是对的：

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

这些是错误的：

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

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

<div onClick={doThis}

div 上缺少结束标记）

Answer 2

这有效

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'));

Answer 3

以下代码现在可以运行了！

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

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