親のonClickを無視するreactJS

Question

父のonClick関数を無視して、子のonclick関数（jQueryや角を使用しない）のみを使用するにはどうすればよいですか？

<div onclick="alert('US')"> country 
 
    <div onclick="alert('NY')">city</div> 
 
</div>

Answer 1

あなたは、イベントオブジェクト上のstopPropagationを呼びたいです。

https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

これは、同様に親のハンドラにバブルアップされているイベントを停止します。

ここではインラインクリックハンドラと連携していますが、読みやすくするために関数に取り込むことをお勧めします。いずれかのインラインまたは好ましく関数で

<div onclick="alert('US')"> country 
 
    <div onclick="event.stopPropagation(); alert('NY');">city</div> 
 
</div>

Answer 2

コールe.stopPropagation()。

handleClick(e, text){ 
    e.stopPropagation(); 
    alert(text); 
} 

render(){ 
    return (
     <div onClick={this.handleClick.bind(this, 'US')}> country 
      <div onClick={this.handleClick.bind(this, 'NY')}}>city</div> 
     </div> 
    ) 
}