reactjs - 防止onmouseout激发子元素

给定以下内容：

render() {

  const onMouseOver = (event) => {
    this.setState({ isHovering: true });
  };

  const onMouseOut = (event) => {
    this.setState({ isHovering: false });
  };

  const open = this.state.isHovering ? true : false;

  return (
    <Nav className={styles.TopNav} bsStyle="pills" activeKey={1}>
      <NavDropdown
        className={dropDownClasses}
        eventKey={1}
        open={open}
        title="Cards"
        id="nav-dropdown"
        onMouseEnter={onMouseOver}
        onMouseOut={onMouseOut}>
        <MenuItem eventKey="1.1">Action</MenuItem>
        <MenuItem eventKey="1.2">Another action</MenuItem>
      </NavDropdown>
      <NavItem className={styles.navLink} eventKey={2}>Blog</NavItem>
    </Nav>
  );

当鼠标悬停在NavDropdown的子元素上时，如何防止onMouseOut触发。

我可以检测onMouseOut中的孩子吗？

最佳答案

这不是特定于React的。 mouseover和mouseout事件冒泡，因此处理程序还会为该元素的子级触发。 mouseenter和mouseleave不会冒泡。

因此，您应该改为收听mouseleave。

关于reactjs - 防止onmouseout激发子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34071798/