実際のイベントの伝播は実際には止まらない

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

リスト項目をクリックしてラジオボタンを変更したときにイベントをトリガーし、同じ操作を実行する必要があります。ここで問題となるのは、ラジオ入力をクリックするとイベントが2回呼び出され、イベントはリスト項目のクリックイベントに伝播します。ストップ伝播およびネイティブ・ストップ・メソッドは機能しません。

ここでの意図は、ラジオボタンをクリックしたときに、リ行全体をクリック可能にし、イベントを2回呼び出さないことです。ここで

は変更https://jsfiddle.net/dbd5f862/

Answer 1

jsfiddleで、イベントをクリックし異なるイベントです。ラジオボタンがクリックされると、その変更イベントが発生します。しかし同時に、リストアイテムもクリックされ、そのクリックイベントは同時に発生します。変更イベントの伝播を停止しても、クリックイベントには影響しません。この問題を解決するには

、あなたはラジオボタンのクリックイベントの伝播を停止することができます：

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

はここで更新フィドルです：。https://jsfiddle.net/cpwsd3ya/