クリックするとネストされたコンポーネントのイベントバブリングが防止されます

Question

これは基本的なコンポーネントです。 <ul>と<li>には両方ともonClick機能があります。 <ul>ではなく、<li>のonClickだけを起動します。どうすればこれを達成できますか？

私は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 

Answer 1

私は同じ問題がありました。私は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>  
    ) 
    } 
} 

Answer 2

リアクト伝播を止める意味、この例では「クリック」のようなバブルは、あることをイベント用にドキュメントに単一のイベントリスナーとイベントの委任を使用していますので、のように、私は、別々のコンポーネントにリスト項目を分割しますありえない;実際のイベントは、あなたがReactでそれとやり取りする時までにすでに伝播しています。 Reactは内部で合成イベントの伝播を処理するため、Reactの合成イベントに対するstopPropagationが可能です。

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