取消父組件的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事件中的子組件在陣營

回答

相關問題