React.js에서의 버블링 및 캡처 예시

React.js에서의 버블링 및 캡처 예시

React.js에서 Bubbling과 Capture를 처리하는 예를 찾고 있습니다.JavaScript를 사용하여 찾았는데 React.js에 해당하는 것을 찾기가 어렵습니다.

React.js에서 Bubbling and Capture의 예를 작성하려면 어떻게 해야 합니까?

버블링과 캡처는 모두 DOM 사양에서 설명한 것과 동일한 방법으로 React에서 지원됩니다.단, 핸들러의 접속 방법을 제외합니다.

버블링은 일반 DOM API와 마찬가지로 간단합니다.단순히 핸들러를 요소의 최종적인 부모에 연결하기만 하면 해당 요소에 트리거된 이벤트는 부모에 버블됩니다.stopPropagation다음 단계를 거칩니다.

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

캡처는 간단하지만 문서에는 짧게만 언급되어 있습니다.간단하게 추가Capture이벤트 핸들러 속성명으로 이동합니다.예를들면onClick된다onClickCapture:

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

이 경우,handleClickViaCapturing콜stopPropagation그 이벤트에서는 버튼의onClick핸들러는 호출되지 않습니다.

이 JSBin에서는 캡처, 버블링 및stopPropagationReact에서 작업: https://jsbin.com/hilome/edit?js,output

언급URL : https://stackoverflow.com/questions/34522931/example-for-bubbling-and-capturing-in-react-js