在 React JS 中设置 onClick 值

IT技术 javascript jquery html reactjs
2021-05-04 18:00:04

我目前正在测试，但有一个我无法解决的问题。我基本上想在单击它之前更改 div.btn 中的 onClick 值。javascript 代码位于 react.js 中，可在此处获得。我喜欢改变的部分在这里：

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。我对此相当陌生，不知道如何实现这一目标。

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 是更好的做法。

其它你可能感兴趣的问题
上一篇是否可以将 useEffect 放在 if 语句中？ 下一篇React - 使用 axios 将图像上传到 Imgur 返回 ERR_HTTP2_PROTOCOL_ERROR