[解決済み] ネストされたReactコンポーネントのクリック時のイベントバブリングを防止するにはどうすればよいですか？

質問

ここに基本的な部品があります。このコンポーネントは <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

解決方法は？

私も同じような問題を抱えていました。私はstopPropagationを見つけました した。 が動作します。私なら、このようにリスト項目を別のコンポーネントに分割します。

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

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

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();  //  <------ Here is the magic
    this.props.onClick();
  }

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