陣營防止嵌套組件事件冒泡上點擊

這是一個基本組成部分。 <ul>和<li>都有onClick函數。我只想要的onClick上<li>火，而不是<ul>。我怎樣才能做到這一點？陣營防止嵌套組件事件冒泡上點擊

我已經與e.preventDefault（），e.stopPropagation（）玩耍了，但無濟於事。

class List extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleClick() { 
    // do something 
    } 

    render() { 

    return (
     <ul 
     onClick={(e) => { 
      console.log('parent'); 
      this.handleClick(); 
     }} 
     > 
     <li 
      onClick={(e) => { 
      console.log('child'); 
      // prevent default? prevent propagation? 
      this.handleClick(); 
      }} 
     > 
     </li>  
     </ul> 
    ) 
    } 
} 

// => parent 
// => child

來源

2016-07-27 dmwong2268

我有同樣的問題，https://stackoverflow.com/questions/44711549/how-to-prevent-react-component-click-event-bubble-to-document – 2017-06-23 01:36:26

我有同樣的問題。我發現stopPropagation 做工作。我將列表項分割成單獨的部件，像這樣：

class List extends React.Component { 
    handleClick = e => { 
    // do something 
    } 

    render() { 
    return (
     <ul onClick={this.handleClick}> 
     <ListItem onClick={this.handleClick}>Item</li> 
     </ul> 
    ) 
    } 
} 

class ListItem extends React.Component { 
    handleClick = e => { 
    e.stopPropagation(); 
    this.props.onClick(); 
    } 

    render() { 
    return (
     <li onClick={this.handleClick}> 
     {this.props.children} 
     </li>  
    ) 
    } 
}

來源

2016-09-05 12:46:03

真棒！它像一個魅力一樣工作！ – asifsid88

不應該'this.props.handleClick（）''中的組件ListItem'是'this.props.click'？ – ZeroDarkThirty

是的！你是完全正確的。我會更新我的答案 –

陣營使用事件代理與對事件氣泡文檔中的單個事件偵聽器，如「點擊」在這個例子中，這意味着停止傳播是不可能;真正的事件已經在您與React交互的時候傳播開來。在React的綜合事件上停止傳播是可能的，因爲React在內部處理合成事件的傳播。

stopPropagation: function(e){ 
    e.stopPropagation(); 
    e.nativeEvent.stopImmediatePropagation(); 
}

來源

2017-06-16 10:44:16

陣營防止嵌套組件事件冒泡上點擊

回答

相關問題