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

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

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>       
    )
  }
}

Reactjs相关问答推荐

如何在React中的textarea中显示字符数？

React，React Router，Joy UI：如何在导航离开和返回后禁用snackbar重新出现？

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

TanStack/Reaction-Query在我的Vercel应用程序中不起作用

在React中映射对象数组时，如何正确呈现JSX.Element或React.ReactNode类型？

如何使用useState响应快速/顺序状态更新

在每页上应用字体-NextJS

我如何在不被 destruct 的情况下将导航栏固定在顶部？

ReactJS 共享上下文

useMemo 依赖项的行为

React中的功能性组件克隆优化

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误：没有当前用户

为什么我的 Next.js (React) 组件只有在页面中时才有效？

如何在 ReactJS 中提交后删除 URL 中的查询参数

如何保留我的下一个授权用户会话？所以我可以使用提供的 ID 在其他路由中获取数据

react 测试显示错误的结果

React Router 6.4CreateBrowserRouter子元素不显示

如果查询不存在，如何返回所有产品？

无法有条件地更新useEffect中的setState

Material UI 安装和 React v. 18.2 出现问题