盖茨比：在下拉菜单上处理鼠标事件侦听器的最佳方法

Question

我目前正在使用Gatsby构建网站，并为导航添加“悬停”下拉菜单。我的代码完全按照我想要的方式工作，但是我不确定如何更改/处理我不断收到的警告：

<div 
  className={ isProductActive ? "btn active" : "btn"}
  onMouseEnter={ () => this.setState({isProductDDActive: true}) }
  onMouseLeave={ () => this.setState({isProductDDActive: false}) }
  role="link" 
  tabIndex={0}
>
  Header Link
</div>
<ul 
  className={ isProductActive ? "dropdown active" : "dropdown"}
  onMouseEnter={ () => this.setState({isProductDDActive: true}) }
  onMouseLeave={ () => this.setState({isProductDDActive: false}) }
>
  <li>
    <Link to="/">
      Dropdown Link 1
    </Link>
  </li>
  <li>
    <Link to="/">
      Dropdown Link 2
    </Link>
  </li>
  <li>
    <Link to="/">
      Dropdown Link 3
    </Link>
  </li>
</ul>

以下是我的导航标记：

{{1}}