React 事件传播并没有真正停止答案

【问题标题】：React event propagation doesn't really stopReact 事件传播并没有真正停止
【发布时间】：2017-02-16 00:52:01
【问题描述】：

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/

【问题讨论】：

你的 jsfiddle 是空的
我更正了。@HusseinAlkaf

标签： reactjs

【解决方案1】：

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

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

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

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

【讨论】：

太棒了，谢谢。
伟大的...救世主！

【解决方案2】：

如果他们在标签内有复选框，只需将onClick={event => event.stopPropagation()} 放在标签标签上，它对我有用。

【讨论】：