Question

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

当鼠标离开菜单项时，如何停止<hoverMenu />卸载？

此外，我确定这是检查状态以及哪个标签正在悬停的不好方法，但我尝试了一个swtich声明并且没有让它工作，所以如果有更好的方法写下这将是伟大的：

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

我会将其放在webpack.bin演示中，但它会将lint错误扔给我的mouseOut和mouseOver函数，不知道为什么。

Categories.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侦听器移动到包含所有子菜单的包装器。

我还建议抽象出一个帮助方法，确定是否显示每个项目，并使用＆amp;＆amp;而不是三元。

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

将鼠标悬停在菜单项React上

Categories.jsx

HoverMenu.jsx

1 个答案: