reactjs - ReactJS 中无需重复代码的多个下拉菜单

Question

我在state的帮助下创建了下拉菜单onMouseOver。到目前为止，它的工作效果足够好。因为我对 ReactJS 没有太多了解，所以我不确定是否可以使用此方法或不同的方法创建多个下拉列表，而无需一遍又一遍地编写所有代码。

这是我的代码:

  ..........
  constructor(props) {
      super(props);
      this.handleMouseOver = this.handleMouseOver.bind(this);
      this.handleMouseLeave = this.handleMouseLeave.bind(this);
      this.state = {
        isHovering: false
      }
  }
  handleMouseOver = e => {
    e.preventDefault();
    this.setState({ isHovering: true });
  };
  handleMouseLeave = e => {
    e.preventDefault();
    this.setState({ isHovering: false })
  };

 ............

 <ul className="menu">
   <li onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave}>Categories
     {this.state.isHovering?(
       <ul className="dropdown">
         <li>Computerss & Office</li>
         <li>Electronics</li>
       </ul>
     ):null}
    </li>
  </ul>

 ............

因此，如果我想再添加一个下拉列表，我需要在 constructor() 中创建新的 state 和另外 2 行，以及 2 个函数来处理 MouseOver/Leave.So重复金额大约是这样的:

  constructor(props) {
      super(props);
      this.handleMouseOver = this.handleMouseOver.bind(this);
      this.handleMouseLeave = this.handleMouseLeave.bind(this);
      this.state = {
        isHovering: false
      }
  }
  handleMouseOver = e => {
    e.preventDefault();
    this.setState({ isHovering: true });
  };
  handleMouseLeave = e => {
    e.preventDefault();
    this.setState({ isHovering: false })
  };

我可能会有 10 多个下拉菜单，最后会加载大量代码。那么有没有可能不重复代码呢？谢谢!

Answer 1

您应该使用您的event.target来实现您想要的。这样，您就会知道您将鼠标悬停在哪个下拉菜单上，并应用您需要的任何逻辑。例如，您可以检查您悬停的下拉列表是否是类别下拉列表，如下所示:

if(e.target.className === "class name of your element")
this.setState({hoveredEl: e.target.className})

然后你可以在代码中使用它来显示/隐藏你想要的元素。

你可以查看我创建的这个 fiddle 的示例:https://jsfiddle.net/n5u2wwjg/153708/

我认为您不需要 onMouseLeave 事件，但如果您需要，可以遵循我应用于 onMouseOver 的逻辑

希望有帮助。