reactjs - React 事件传播并没有真正停止

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>;
 }
});

我需要在单击列表项和更改单选按钮时触发事件，并执行相同的操作。这里的问题是，当我单击 radio 输入时，事件被调用两次，并且事件传播到列表项的单击事件。停止传播和 native 停止方法不起作用。

这里的目的是我希望整个 li 行可单击，并且单击单选按钮时不应调用事件两次。

这里是jsfiddle https://jsfiddle.net/dbd5f862/

Answer 1

更改事件和点击事件是不同的事件。当单击单选按钮时，将触发其更改事件。但是，列表项也被单击，因此它的单击事件将同时触发。停止传播更改事件不会影响点击事件。

要解决此问题，您可以停止单选按钮的单击事件的传播:

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

这是更新的 fiddle :https://jsfiddle.net/cpwsd3ya/