如何防止单击时嵌套 React 组件中的事件冒泡？

Question

这是一个基本组件。 <ul> 和 <li> 都具有 onClick 功能。我只希望 <li> 上的 onClick 触发，而不是 <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

原文由 dmwong2268 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到过同样的问题。我发现 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>
    )
  }
}

原文由 Will Stone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

React 使用事件委托和文档上的单个事件侦听器来处理冒泡的事件，例如本例中的“点击”，这意味着停止传播是不可能的；当您在 React 中与它交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。

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

原文由 Priyanshu Chauhan 发布，翻译遵循 CC BY-SA 3.0 许可协议