javascript - 将鼠标悬停在菜单项上 React

Question

我正在尝试在 react 中创建一个大型菜单，我遇到的问题是，当将鼠标悬停在菜单项上时，子菜单会出现，但一旦鼠标离开菜单项并越过子菜单，子菜单就会出现然后关闭。

我怎样才能阻止 <hoverMenu />当鼠标离开菜单项时卸载？

此外，我确信这是检查状态以及哪个选项卡悬停在其上的不好方法，但我尝试了一个 swtich 语句，但无法使其工作，所以如果有更好的方法来编写这个，那么很棒:

{this.state.tabId === 1 && this.state.hover === true ? <HoverMenu text="Menu for Item 1" /> : '' }

我会把它放在 webpack.bin 中演示，但它向我的 mouseOut 抛出了 lint 错误和mouseOver功能，不知道为什么。

类别.jsx

const Wrapper = styled.div`
  position:relative;
  width:100%;
  height:46px;
  background: #90BA41;
`

export default class Categories extends React.Component { // eslint-
disable-line react/prefer-stateless-function
  constructor() {
    super()
    this.state = { hover: false, tabId: '' }
    this.mouseOver = this.mouseOver.bind(this)
    this.mouseOut = this.mouseOut.bind(this)
  }

mouseOver = (id) => {
this.setState({ hover: true, tabId: id })
}

mouseOut = (id) => {
this.setState({ hover: false, tabId: id })
}

render() {
const tabs = items.map(item =>
  <div
    className="cell"
    key={item.id}
    onMouseEnter={() => this.mouseOver(item.id)}
    onMouseLeave={() => this.mouseOut(item.id)}
  >
    <NavLink
      to="/"
    >{item.name}
    </NavLink>
  </div>,
)

return (
  <Wrapper>
    <div className="grid grid--flexcells gridxs--full gridsm--full grid--md-1of2 gridlg--1of2 gridxl--1of12">
      {tabs}
    </div>
    <div>
      {this.state.tabId === 1 && this.state.hover === true ? <HoverMenu text="Menu for Item 1" /> : '' }
      {this.state.tabId === 2 && this.state.hover === true ? <HoverMenu text="Menu for Item 2" hover={this.state.hover} /> : '' }
      {this.state.tabId === 3 && this.state.hover === true ? <HoverMenu text="Menu for Item 3" /> : '' }
      {this.state.tabId === 4 && this.state.hover === true ? <HoverMenu text="Menu for Item 4" /> : '' }
      {this.state.tabId === 5 && this.state.hover === true ? <HoverMenu text="Menu for Item 5" /> : '' }
      {this.state.tabId === 6 && this.state.hover === true ? <HoverMenu text="Menu for Item 6" /> : '' }
      {this.state.tabId === 7 && this.state.hover === true ? <HoverMenu text="Menu for Item 7" /> : '' }
      {this.state.tabId === 8 && this.state.hover === true ? <HoverMenu text="Menu for Item 8" /> : '' }
      {this.state.tabId === 9 && this.state.hover === true ? <HoverMenu text="Menu for Item 9" /> : '' }
      {this.state.tabId === 10 && this.state.hover === true ? <HoverMenu text="Menu for Item 10" /> : '' }
      {this.state.tabId === 11 && this.state.hover === true ? <HoverMenu text="Menu for Item 11" /> : '' }
      {this.state.tabId === 12 && this.state.hover === true ? <HoverMenu text="Menu for Item 12" /> : '' }
    </div>
  </Wrapper>
)
}
}

HoverMenu.jsx

const Wrapper = styled.div`
  position:absolute;
  width:100%;
  height:200px;
  background:#fff;
  z-index:999;
  `

const HoverMenu = () => (
<Wrapper> {this.props.text}</Wrapper>
 )

Answer 1

问题是您在主菜单上设置 onMouseOut 监听器，而不是在子菜单上，因此当您离开主菜单时状态会发生变化。将 onMouseOut 监听器移至包含所有子菜单的包装器。

我还建议抽象出一个辅助方法来确定是否显示每个项目，并使用 && 而不是三元组。

mouseOut = () => {
  this.setState({ hover: false })
}

isShown(num) {
  return this.state.tabId === num && this.state.hover === true
}

render() {
  const tabs = items.map(item =>
    <div
      className="cell"
      key={item.id}
      onMouseEnter={() => this.mouseOver(item.id)}
    >
      <NavLink to="/">{item.name}</NavLink>
    </div>,
  )

  return (
    <Wrapper>
      <div className="grid grid--flexcells gridxs--full gridsm--full grid--md-1of2 gridlg--1of2 gridxl--1of12">
        {tabs}
      </div>
      <div onMouseLeave={this.mouseOut}>
        {isShown(1) && <HoverMenu text="Menu for Item 1" />}
        {isShown(2) && <HoverMenu text="Menu for Item 2" />}
        {isShown(3) && <HoverMenu text="Menu for Item 3" />}
        {isShown(4) && <HoverMenu text="Menu for Item 4" />}
        ...
      </div>
    </Wrapper>
  )
}