javascript - 在 React JS 中设置 onClick 值

Question

我目前正在测试，但有一个无法解决的问题。我基本上想在单击之前更改 div.btn 的 onClick 值。 javascript 代码位于react.js 中并且可用 here 。我想改变的部分在这里:

React.createElement("div", {className: "img"},
                            React.createElement("div", {className: "btn noShadow", onClick: this.sendVote.bind(this, this.props.data.candidate1.id)}, this.props.data.translations.vote),
                            React.createElement("img", {src: domain + this.props.data.candidate1.img_challenge_url, onClick: this.sendVote.bind(this, this.props.data.candidate1.id)})
                        ),

我正在尝试将 div.btn.noShadow 的值设置为“12345”，通常我会在 Tampermonkey 中执行以下操作:

$("#div.content > div.left > div.img > div.btn.noShadow").attr("onclick", "sendVote(12345)")

但这似乎不起作用，因为react.js改变了DOM。我对此相当陌生，不知道如何实现这一目标。

Answer 1

在 React 哲学中，您希望触发重新渲染(可以通过更改状态来完成)，并根据状态/某些条件更改标记。

getInitialState: function () {
    return {
        // ...
        fn: this.sendVote.bind(this, this.props.data.candidate1.id)
    };
},
render: function () {
    return (
        // ...
        React.createElement("whatever", {
            // ...
            onClick: this.state.fn
        });
    );
}

当您想要更改点击回调时:

this.setState({ fn: function blah() {} });

编辑:JSFiddle

<小时/>

旁注:

如果组件有父组件，则使用 props 而不是 state 是更好的做法。