时间戳

首页 > 解决方案 > React 元素中的 onMouseOver 选择所有元素而不仅仅是单个元素

reactjs - React 元素中的 onMouseOver 选择所有元素而不仅仅是单个元素

问题描述

我已经设置了一个组件，它在 onMouseOver 上显示一个“div”，说明组件是什么，因为它是一个链接。

但是，当您将鼠标悬停在任何一个元素上时，它会显示所有“div”，而不仅仅是要悬停的适当的一个。

我知道这是因为我的函数“通常”设置了状态，如果所述状态为真，它会显示全部 - 但我不知道如何重构我的代码以仅选择相关的代码。

这是我的代码：

class SideNav extends Component {
  constructor(props) {
    super (props)
    this.state = {
      linkHover: false
    }
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

  }

  onMouseEnter() {
    this.setState({
      linkHover: true
    });
  }

  onMouseLeave() {
    this.setState({
      linkHover: false
    })
  }

  render() {
    return (
      <div>
      <section className="side-nav-section">
        <div className="side-nav-container">

          <div className="side-nav-links-container">
            <div className="side-nav-link" link="new-debt" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Link a debt</p> <span className="side-nav-link-span"></span> </div> : null }
            </div>


            <div className="side-nav-link" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Dashboard</p> <span className="side-nav-link-span"></span> </div> : null }
            </div>


            <div className="side-nav-link" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
              { this.state.linkHover ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Analytics</p> <span className="side-nav-link-span"></span> </div> : null }

            </div>


          </div>
        </div>
      </section>

      </div>
    )
  }
}

我觉得我应该知道这一点，这似乎是一个简单的问题，但无法弄清楚。

任何指针将不胜感激！

标签： reactjs

解决方案

这里最简单的方法是使用一个Int来识别元素。然后你把它作为参数传递给onMouseEnter. onMouseLeave只需将其设置为false，因此不会显示任何内容。

this.state = {
  linkHover: false
}

onMouseEnter(id) {
  this.setState({
    linkHover: id
  });
}

onMouseLeave() {
  this.setState({
    linkHover: false
  })
}

<div className="side-nav-link" link="new-debt" onMouseEnter={() => this.onMouseEnter(0)} onMouseLeave={this.onMouseLeave}>
   { this.state.linkHover == 0 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Link a debt</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

<div className="side-nav-link" onMouseEnter={() => this.onMouseEnter(1)} onMouseLeave={this.onMouseLeave}>
   { this.state.linkHover == 1 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Dashboard</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

<div className="side-nav-link" onMouseEnter={() => this.onMouseEnter(2)} onMouseLeave={this.onMouseLeave}>
  { this.state.linkHover == 2 ? <div className="side-nav-link-hover"> <p className="side-nav-link-hover-paragraph">Analytics</p> <span className="side-nav-link-span"></span> </div> : null }
</div>

一旦你熟悉了 React 的类组件，我建议你看看更新的带有钩子的功能组件。他们产生了更具可读性的代码！

推荐阅读