は、私がどのように見えるのコンポーネントを持っている

Question

を反応させるのに子コンポーネントに親コンポーネントのonClickイベントをキャンセルします。子onClickイベントが発生したときに、親コンポーネントのonClickイベントの伝播をキャンセルするにはどうすればよいですか？

Answer 1

e.stopPropagation();行をイベントハンドラのthis.doSomethingElseの先頭に追加する必要があります。

Event.stopPropagation()。

キャプチャフェーズおよびバブリングフェーズでの現在のイベントのさらなる伝播を防止します。

あなたはイベントハンドラでe.StopPropagation()を使用するときだから、先祖までバブリングし、そのイベントハンドラをトリガするイベントを防ぎます。

this.doSomethingElseメソッドの引数には、eを必ず含めてください。

doSomethingElse(e) { 
    e.stopPropagation(); 
    // ... do stuff 
} 

Answer 2

イベントの重複を避けるには、stopPropagation機能を使用してください。

class App extends React.Component { 
 
    
 
    firstHandle =() => { 
 
    console.log('parent'); 
 
    } 
 
    
 
    secondHandle = (e) => { 
 
    e.stopPropagation(); 
 
    console.log('child'); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div onClick={this.firstHandle}> 
 
     Parent 
 
     <div onClick={this.secondHandle}>child</div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById("react") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="react"></div>

の