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

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

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

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

Answer 1

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

为了解决这个问题，你可以停止单选按钮的点击事件的传播：

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

这是一个更新的小提琴：https : //jsfiddle.net/cpwsd3ya/