堆疊的父子組件未觸發子組件的onClick事件

Question

我有以下兩個組件，分別具有onClick()處理函數。 問題是doSomethingElse永遠都不會獲取，而是直接調用doSomething 。

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

Child被示出為在像proover parent使用z-index 。

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

  }

  handleP = (e) => {
    alert("parent")
  };

  render() {
    return (

      <div onClick={this.handleP} style={{
        left: 100,
        top: 100,
        zIndex: 100,
        position: 'absolute',
      }}>
      Parent Text
        <Child  />
      </div>          

    )
  }
}

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

  }

  handleC = (e) => {
    alert("child")
  };

  render() {
    return (

      <div onClick={this.handleC} style={{
        left: 1,
        top: 1,
        zIndex: 1000,
        position: 'absolute',
      }}>
      Child Text  
      </div>          

    )
  }
}



React.render(
  <Parent />,
  document.getElementById('react_example')
); 

Jsbin

Answer 1

@SandipPingle的問題是因為默認情況下，單擊事件會一直冒到窗口。 因此，在調用子處理程序之后，事件會冒泡到父組件。 為此，您需要停止事件傳播。 請參閱此問題和此沙箱 ，以基於此答案的示例固定版本:)