React - 부모로부터 이벤트 트리거 방지

Question

이 시나리오에서는 부모 요소를 클릭 할 때 다른 색으로 자식 요소를 표시하도록 전환합니다. 불행히도 사용자가 색상 중 하나를 클릭하면 부모의 '클릭'이벤트가 발생합니다.

자녀를 클릭 할 때 어떻게 부모에서 이벤트 트리거를 중지 할 수 있습니까?

가능한 솔루션 궁금 :

1 - CSS를? 자식을 클릭 할 때 pointer-events : none 클래스를 부모에 추가하십시오. 그러나 이것은 나중에 학부모가 pointer-events 클래스의 정화가 필요함을 의미합니다.

2 - Ref을 사용 하시겠습니까? React 요소 & 부모의 ref을 클릭하여 기록하십시오. event.target을 참조와 비교하십시오. 나는 세계를 좋아하지 않기 때문에 나는 이것을 좋아하지 않는다. ref.

생각보다 & 더 좋은 해결책은 많이 감사하겠습니다. 질문 : 자녀가 클릭 할 때 부모 이벤트 트리거를 중지하려면 어떻게합니까? 당신이 사용할 수있는

Answer 1

는 stopPropagation

stopPropagation - 에 버블 링 단계를 현재의 이벤트가 전파를 방지

var App = React.createClass({ 
 
    handleParentClick: function (e) { 
 
    console.log('parent'); 
 
    }, 
 

 
    handleChildClick: function (e) { 
 
    e.stopPropagation(); 
 
    console.log('child'); 
 
    }, 
 

 
    render: function() { 
 
    return <div> 
 
     <p onClick={this.handleParentClick}> 
 
     <span onClick={this.handleChildClick}>Click</span> 
 
     </p> 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>