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() E.g：

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

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

1 个答案: