多个下拉列表，而无需在ReactJS中重复代码

Question

我已经在onMouseOver的帮助下创建了下拉列表state。到目前为止，它的工作情况还不错。因为我对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>

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

因此，如果我想再添加一个下拉菜单，则需要在state中新建constructor()和2行，并使用2个函数来处理MouseOver / Leave。因此重复次数约为： / p>

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

然后在代码中使用此状态显示/隐藏所需的元素。

您可以查看我创建的这个小提琴的示例：https://jsfiddle.net/n5u2wwjg/153708/

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

希望有帮助。

Answer 2

1。您需要将每个<li>项目的状态保存在数组/对象中，以跟踪悬停状态。

  constructor(props) {
    super(props);
    ...
    this.state = {
      hoverStates: {} // or an array
    };
  }

2。并在事件处理程序中设置每个项目的状态。

handleMouseOver = e => {
    this.setState({
      hoverStates: {
        [e.target.id]: true
      }
    });
  };
  handleMouseLeave = e => {
    this.setState({
      hoverStates: {
        [e.target.id]: false
      }
    });
  };

3。您需要在菜单项列表中设置id（name对<li>不起作用）。

还请确保添加key，以使React不会给您警告。

  render() {
    const { hoverStates } = this.state;
    const menuItems = [0, 1, 2, 3].map(id => (
      <li
        key={id}
        id={id}
        onMouseOver={this.handleMouseOver}
        onMouseLeave={this.handleMouseLeave}
        className={hoverStates[id] ? "hovering" : ""}
      >
        Categories
        {hoverStates[id] ? (
          <ul className="dropdown menu">
            <li>#{id} Computerss & Office</li>
            <li>#{id} Electronics</li>
          </ul>
        ) : null}
      </li>
    ));

    return <ul className="menu">{menuItems}</ul>;
  }

4。结果看起来像这样。

---

您可以在此处查看有效的演示。

---

无耻的插头

我已经写过有关如何跟踪博客Keeping track of on/off states of React components中每个项目的信息，其中有更详细的解释。