React event propagation doesn't really stop

Question

var Vote = React.createClass({
    onVote(event){
      console.log("event triggered");
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
    },

    render: function() {
     return <div>
      <ul>
       <li onClick={this.onVote}>
        <input 
        type="radio" 
        name="vote_for_president" 
        value="donald"
        onChange={this.onVote}/>
        Donald
    </li>
    <li onClick={this.onVote}>
        <input type="radio" 
      name="vote_for_president" 
      value="clinton"
      onChange={this.onVote}
      />Clinton
    </li>
  </ul>
 </div>;
 }
});

I need to trigger an event on the click of list item and on change of radio button and have perform the same action. Issue here is the event is being called twice when I click on the radio input and event propagates to click event of list item. Stop propagation and native stop methods isn't working.

The intention here is I want the whole li row to be clickable and event should not be called twice when click on radio button.

Here is jsfiddle https://jsfiddle.net/dbd5f862/

Your jsfiddle is empty

Kafo
– Kafo

2016-10-07 05:56:28 +00:00
Commented Oct 7, 2016 at 5:56 — Kafo
– Kafo, Commented Oct 7, 2016 at 5:56
I corrected it.@HusseinAlkaf

srinivas
– srinivas

2016-10-07 06:07:31 +00:00
Commented Oct 7, 2016 at 6:07 — srinivas
– srinivas, Commented Oct 7, 2016 at 6:07

tobiasandersen · Accepted Answer · 2018-11-04 20:00:25Z

11

The change and click events are different events. When a radio button is being clicked, its change event will fire. But, the list item was also clicked, and its click event will therefore fire at the same time. Stopping the propagation of the change event won't affect the click event.

To solve this, you could stop the propagation of the radio button's click event:

<li onClick={this.onVote}>
  <input 
    ...
    onChange={this.onVote}
    onClick={event => event.stopPropagation()}
  />
  Donald
</li>

Here's an updated fiddle: https://jsfiddle.net/cpwsd3ya/

edited Nov 4, 2018 at 20:00

answered Oct 7, 2016 at 10:57

tobiasandersen

8,6783 gold badges32 silver badges40 bronze badges

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

2 Comments

srinivas Over a year ago

awesome, Thank you.

Rashmi Over a year ago

Great...savior!

willy · Accepted Answer · 2020-12-30 18:55:10Z

0

If they have the checkbox inside a label, just place the onClick={event => event.stopPropagation()} to the tag label, it worked for me.

answered Dec 30, 2020 at 18:55

willy

92 bronze badges

Collectives™ on Stack Overflow

React event propagation doesn't really stop

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related