html - React - onmouseenter 在子元素之间不起作用

Question

我正在尝试实现悬停时显示的菜单。问题是菜单在悬停在 DropdownOption 子元素之间时会隐藏，所以每当我在选项 1 和 2 之间悬停时。每个子元素都是一个 div，并且有 0px 的边距

  openDropdown = () => {
    this.setState({showList: true})
  }

  closeDropdown = () => {
    this.setState({showList: false})
  }

  showList = () => {
    return (
      <DropdownContainer onMouseEnter={this.openDropdown} onMouseLeave={this.closeDropdown}>
          <DropdownOption>Option1</DropdownOption>
          <DropdownOption>Option2</DropdownOption>
      </DropdownContainer>
    )
  }

render () {
    return (
      <div onMouseEnter={this.openDropdown}>
        <MenuButtonContainer>
          Title
        </MenuButtonContainer>
        {this.state.showList ? this.showList() : null}
      </div>
    )
  }

Answer 1

这听起来像是一个事件冒泡问题。

你在哪里有你的事件监听器回调，例如:

openDropdown = () => {
  this.setState({showList: true})
}

尝试访问 event 对象，将其作为函数的参数包含在内。然后在事件对象上，调用 stopPropagation() 例如:

openDropdown = (event) => {
  event.stopPropagation()
  this.setState({showList: true})
}