Set onClick value in React JS

Question

I'm currently testing and I have a problem I can not solve. I basically want to change the onClick value from a div.btn before I click on it. The javascript code is in react.js and available here. The part I like to change is 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)})
                        ),

I am trying to set the value from div.btn.noShadow to "12345", normally I would just do the following in Tampermonkey:

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

But this does not seem to work because react.js changes the DOM. I am fairly new to this and have no idea how to achieve this.

Have you tried passing the onClick down as a prop from parent to the child? In this way, the parent can control what the onClick should be. — FriC
– FriC, Commented Jul 9, 2015 at 21:52
No, because I really don't have any idea how to do that :/ — Paranoia
– Paranoia, Commented Jul 9, 2015 at 22:09
Well, when exactly do you need to change the onClick? You just said 'before clicking on div.btn', but that does not correspond to any event. If you have an actual event (onChange, etc), then in that event handler, you can change the onClick using setState. — FriC
– FriC, Commented Jul 9, 2015 at 22:50

deleted user · Accepted Answer · 2015-07-09 23:04:49Z

1

In React philosophy, you would want to trigger a re-render (which can be done by changing the state), and changing the markup based on the state/some condition.

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

When you want to change the click callback:

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

edit: JSFiddle

side note:

If the component has a parent, using props rather than state is better practice.

edited Jul 9, 2015 at 23:04

answered Jul 9, 2015 at 21:58

deleted user

8321 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paranoia Over a year ago

Thanks for the answer, I don't really see where I can set the value here. But as I said, I am totally new to this and I have no idea what I have to do exactly. Any help would be appreciated!

deleted user Over a year ago

@Paranoia I added a JSFiddle example that will hopefully help. Also, what do you mean by "where I can set the value"? Are you referring to where you can set the new onClick function or something else?

Paranoia Over a year ago

Thank you for investing your time! I'll try to clarify: I am trying to change the onClick value of a div.btn that already has been rendered with a userscript. I don't have access to the page/script itself (well, I do, but we are testing if the competition we did has the possibility to cheat), the competition is here: 20min.ch/community/duellv2/default.tmpl?id=406 (and no, I do not participate, just testing!).

Collectives™ on Stack Overflow

Set onClick value in React JS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related