的onClick觸發時，孩子被點擊

Question

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

    this.handleChild = this.handleChild.bind(this); 
    this.handleParent = this.handleParent.bind(this); 
    } 

    render() { 
    return (
     <div 
     style={{width: '100%', height: '500px', background: 'white'}} 
     onClick={this.handleParent}> 

     <div 
      style={{ width: '40px', height: '40px', margin: '0 auto', background: 'black'}} 
      onClick={this.handleChild}> 
      hello 
     </div> 

     </div> 
    ); 
    } 

    handleParent(e) { 
    console.log('parent'); 
    } 

    handleChild(e) { 
    console.log('child'); 
    } 
} 

輸出點擊孩子時

child 
parent 

願望輸出

child 

我的意思是我只是想引發獨生子女的onClick當孩子被點擊。

父母工作正常。當父母被點擊時，它只觸發父母的onClick。 我遇到的問題是與孩子在一起。

Answer 1

你需要停止孩子處理程序中傳播，

​​

stopPropagation - 阻止當前事件的進一步傳播在 捕獲和冒泡階段。

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

 
    this.handleChild = this.handleChild.bind(this); 
 
    this.handleParent = this.handleParent.bind(this); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div 
 
     style={{width: '100%', height: '500px', background: 'white'}} 
 
     onClick={this.handleParent}> 
 

 
     <div 
 
      style={{ width: '40px', height: '40px', margin: '0 auto', background: 'black'}} 
 
      onClick={this.handleChild}> 
 
      hello 
 
     </div> 
 

 
     </div> 
 
    ); 
 
    } 
 

 
    handleParent(e) { 
 
    console.log('parent'); 
 
    } 
 

 
    handleChild(e) { 
 
    e.stopPropagation(); 
 
    console.log('child'); 
 
    } 
 
} 
 

 
ReactDOM.render(<Sample />, document.getElementById('app'));

<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="app"></div>