Ví dụ về Bong bóng và Chụp trong React.js

Question

Tôi đang tìm một ví dụ trong việc xử lý Bubbling và Chụp trong React.js. Tôi đã tìm thấy one with JavaScript, nhưng tôi gặp khó khăn trong việc tìm kiếm tương đương với React.js.

Làm cách nào để tạo một ví dụ cho Bubbling và Chụp trong React.js?

Answer 1

Việc tạo bọt và chụp đều được hỗ trợ bởi React theo cách tương tự như được mô tả bằng thông số DOM, ngoại trừ cách bạn đi về việc gắn các trình xử lý.

Bong bóng cũng đơn giản như với API DOM thông thường; chỉ cần đính kèm một handler cho một phụ huynh cuối cùng của một phần tử, và bất kỳ sự kiện kích hoạt trên yếu tố đó sẽ bong bóng để phụ huynh chừng nào nó không ngừng qua stopPropagation trên đường đi:

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

chụp là cũng giống như đơn giản, mặc dù nó là mentioned only briefly in the docs. Chỉ cần thêm Capture sự kiện tên tài sản xử lý:

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

Trong trường hợp này, nếu handleClickViaCapturing cuộc gọi stopPropagation về sự kiện này, xử lý onClick của nút sẽ không được gọi.

This JSBin phải chứng minh như thế nào chụp, bọt, và stopPropagation công trình Phản ứng: https://jsbin.com/hilome/edit?js,output