javascript - 如何在 React.js 中使用 onClick 和 div

Question

我正在制作一个非常简单的应用程序，您可以单击方形 div 将其颜色从白色更改为黑色。但是，我遇到了麻烦。我想使用 onClick 函数来允许用户单击正方形来更改其颜色，但它似乎不起作用。我尝试过使用 span 和空 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 事件确实可以与 React 中的 div 配合使用，因此请仔细检查您的代码语法。

这些是正确的:

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

这些都是错误的:

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

(并且不要忘记关闭标签...注意这一点:

<div onClick={doThis}

div 上缺少结束标记)