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中的值设置为＆＃34; 12345＆＃34;，通常我会在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是更好的做法。

在React JS中设置onClick值

1 个答案: