在 React JS 中设置 onClick 值答案

【问题标题】：Set onClick value in React JS在 React JS 中设置 onClick 值
【发布时间】：2015-09-28 11:53:26
【问题描述】：

我目前正在测试，但有一个无法解决的问题。我基本上想在单击它之前从 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。我对此很陌生，不知道如何实现这一点。

【问题讨论】：

您是否尝试过将 onClick 作为道具从父母传递给孩子？这样，父母就可以控制onClick应该是什么。
不，因为我真的不知道该怎么做：/
那么，您究竟什么时候需要更改 onClick？您刚刚说“在单击 div.btn 之前”，但这与任何事件都不对应。如果您有一个实际事件（onChange 等），那么在该事件处理程序中，您可以使用 setState 更改 onClick。

标签： javascript jquery html reactjs

【解决方案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 是更好的做法。

【讨论】：

感谢您的回答，我真的不知道在哪里可以设置值。但正如我所说，我对此完全陌生，我不知道我到底要做什么。任何帮助将不胜感激！
@Paranoia 我添加了一个 JSFiddle 示例，希望对您有所帮助。另外，“我可以在哪里设置值”是什么意思？您是指在哪里可以设置新的 onClick 功能或其他什么？
感谢您投入时间！我将尝试澄清：我正在尝试更改已使用用户脚本呈现的 div.btn 的 onClick 值。我无权访问页面/脚本本身（嗯，我有，但我们正在测试我们所做的比赛是否有作弊的可能性），比赛在这里：goo.gl/ylyTgj（不，我不参加，只是测试！）。