ignorieren Eltern onClick reactJS

Question

Wie kann ich die OnClick-Funktion eines Vaters ignorieren und nur die Onclick-Funktion des Kindes verwenden (ohne jQuery oder eckig)?

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

Answer 1

Sie wollen stopPropagation auf das Ereignis Objekt aufzurufen.

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

Dies wird das Ereignis wird sprudelte bis zu der auch Handler der Eltern zu stoppen.

Hier arbeitet es mit Ihrem Inline-Click-Handler, obwohl ich empfehlen, dass Sie sie in Funktionen herausziehen, um sie lesbarer zu machen!

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

Answer 2

Anruf e.stopPropagation() entweder inline oder vorzugsweise in einer Funktion.

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