取消父组件的onClick事件中的子组件在阵营

我有，看起来像一个组件：取消父组件的onClick事件中的子组件在阵营

<ParentComponent onClick={this.doSomething}> 
    <ChildComponent onClick={this.doSomethingElse} /> 
</Parent>

如果我点击ChildComponent，既doSomethingElse和DoSomething的火灾。当onClick事件触发时，如何取消父组件的onClick事件传播？

来源

2017-07-26 Andy Baird

的可能的复制[jQuery的/引导：儿童DIV开辟了家长莫代尔（https://stackoverflow.com/questions/40106573/jquery-bootstrap-child-div-opens- up-parent-modal） –

不，它不是一点点。 –

您应该将行e.stopPropagation();添加到您的this.doSomethingElse事件处理程序的顶部。

Event.stopPropagation()。

防止捕获和冒泡阶段当前事件的进一步传播。

因此，当您在事件处理程序中使用e.StopPropagation()时，它会阻止事件冒泡到祖先并触发其事件处理程序。

确保包含e作为您的this.doSomethingElse方法的参数。

doSomethingElse(e) { 
    e.stopPropagation(); 
    // ... do stuff 
}

来源

2017-07-26 17:41:54

如果您希望避免重复事件，请使用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>

来源

2017-07-26 17:42:56

取消父组件的onClick事件中的子组件在阵营

回答

相关问题