[英]Cancel onClick event of parent component in child component in React
我有一个看起来像这样的组件:
<ParentComponent onClick={this.doSomething}>
<ChildComponent onClick={this.doSomethingElse} />
</Parent>
如果我点击ChildComponent,doSomethingElse和doSomething都会触发。 当子onClick事件触发时,如何取消onClick事件传播的父组件?
你应该添加e.stopPropagation();
到this.doSomethingElse
事件处理程序的顶部。
防止当前事件在捕获和冒泡阶段进一步传播。
因此,当您在事件处理程序中使用e.StopPropagation()
,它会阻止事件冒泡到祖先并触发其事件处理程序。
确保包含e
作为this.doSomethingElse
方法的参数。
doSomethingElse( e ) {
e.stopPropagation();
// ... do stuff
}
如果您希望避免重复事件,请使用stopPropagation
功能。
class App extends React.Component { firstHandle = () => { console.log('parent'); } secondHandle = (e) => { e.stopPropagation(); console.log('child'); } render() { return ( <div onClick={this.firstHandle}> Parent <div onClick={this.secondHandle}>child</div> </div> ); } } ReactDOM.render( <App />, document.getElementById("react") );
<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="react"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.