Przykład Bubbling i przechwytywania w React.js

Question

Szukam przykładu w obsłudze Bubbling i przechwytywanie w React.js. Znalazłem one with JavaScript, ale mam problem ze znalezieniem odpowiednika dla pliku React.js.

Jak powinienem utworzyć przykład Bubbling i Przechwytywanie w React.js?

Answer 1

Bubbling i przechwytywanie są obsługiwane przez React w taki sam sposób, jak opisano w specyfikacji DOM, z wyjątkiem tego, jak radzisz sobie z dołączaniem procedur obsługi.

Bubbling jest tak prosty, jak w przypadku normalnego API DOM; po prostu dołączyć obsługi do ewentualnego rodzica elementu, a wszelkie zdarzenia wywoływane na ten element będzie bańka do rodzica tak długo jak nie jest zatrzymany przez stopPropagation wzdłuż drogi:

<div onClick={this.handleClick}> 
    <button>Click me, and my parent's `onClick` will fire!</button> 
</div> 

Przechwytywanie jest tak samo proste, choć to jest mentioned only briefly in the docs. Wystarczy dodać Capture do obsługi zdarzeń nazwy właściwości:

<div onClickCapture={this.handleClickViaCapturing}> 
    <button onClick={this.handleClick}> 
    Click me, and my parent's `onClickCapture` will fire *first*! 
    </button> 
</div> 

W tym przypadku, jeśli handleClickViaCapturing rozmowy stopPropagation na razie onClick obsługi przycisk nie zostanie wywołana.

This JSBin powinien wykazać jak przechwytywanie, pęcherzyków i stopPropagation prace w React: https://jsbin.com/hilome/edit?js,output