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

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

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

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

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

Answer 2

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

反应事件传播并没有真正停止

2 个答案: