Reactjs 中 onMouseOver onMouseLeave 的意外行为

Question

我正在尝试构建一个简单的网站来练习 React 和 Dom 但是在简单的 onMouseOver 和 onMouseLeave 上我开始遇到麻烦。我只想在悬停在一个字母上时用 div 隐藏名称的其他字母，当离开悬停时它将恢复到初始状态。

我设法通过仅当相关字母在状态下处于活动状态时渲染不同的 divs 来实现效果，但看起来它提供了闪烁效果和意外行为。我不知道是不是因为它正在重新渲染，因此失去了鼠标悬停。您有什么建议和解释吗？

这是练习的代码笔 https://codepen.io/anon/pen/JQLvQp

//example of a letter in css//
.L{
  display: flex;
  justify-content: space-between;
  font-size: 6rem;
  align-items: flex-start;
  height: 50vh;
  transform: translate(0rem, -15rem);
  width: 90%;
  margin: 0 auto;
  cursor: pointer;
}

#L1 {
  background-color: orangered;
  height: 9rem;
  flex: 1;
  animation: fadein1;
  animation-duration: 2s;

}

#L2 {
  height: 0;
  flex: 1;

}

#L3 {
  background-color: orangered;
  height: 9rem;
  flex: 5;  
  animation: fadein5;
  animation-duration: 2s;
}

@keyframes fadein1{
  0%{flex: 0}
  100%{flex: 1  }
}
@keyframes fadein5{
  0%{flex: 0}
  100%{flex: 5  }
}

// here's the actual code //

import './App.css';
import React, { Component } from 'react';



class Home extends Component {
  constructor(props) {
    super(props)

    this.funzionina = () => {
      console.log("casa")
    }

    this.state = {
      A: false,
      L: false,
      E: false,
      S: false,
      SS: false,
      I: false,
      O: false,
    }


  }


  render() {
    return (
      <div className="papa" >
        <div className="App">
          <div onMouseOver={() => { this.state.A === false ? this.setState({ A: true }) : console.log("Casa") }} onMouseLeave={() => this.setState({ A: false })}><h2> A</h2></div>
          <div onMouseOver={() => this.setState({ L: true })} onMouseLeave={() => this.setState({ L: false })}><h2> L</h2></div>
          <div onMouseOver={() => this.setState({ E: true })} onMouseLeave={() => this.setState({ E: false })}><h2> E</h2></div>
          <div onMouseOver={() => this.setState({ S: true })} onMouseLeave={() => this.setState({ S: false })}><h2> S</h2></div>
          <div onMouseOver={() => this.setState({ SS: true })} onMouseLeave={() => this.setState({ SS: false })}><h2> S</h2></div>
          <div onMouseOver={() => this.setState({ I: true })} onMouseLeave={() => this.setState({ I: false })}><h2> I</h2></div>
          <div onMouseOver={() => this.setState({ O: true })} onMouseLeave={() => this.setState({ O: false })}><h2> O</h2></div>
        </div>
        {this.state.A && <div className="A"> <div id="A1"> </div> <div id="A2"> </div> <div id="A3"> </div> </div>}
        {this.state.L && <div className="L"> <div id="L1"> </div> <div id="L2"> </div> <div id="L3"> </div> </div>}
        {this.state.E && <div className="E"> <div id="E1"> </div> <div id="E2"> </div> <div id="E3"> </div> </div>}
        {this.state.S && <div className="S"> <div id="S1"> </div> <div id="S2"> </div> <div id="S3"> </div> </div>}
        {this.state.SS && <div className="SS"> <div id="SS1"> </div> <div id="SS2"> </div> <div id="SS3"> </div> </div>}
        {this.state.I && <div className="I"> <div id="I1"> </div> <div id="I2"> </div> <div id="I3"> </div> </div>}
        {this.state.O && <div className="O"> <div id="O1"> </div> <div id="O2"> </div> <div id="O3"> </div> </div>}

      </div >

    )
  }

}

export default Home;

Answer 1

在 DOM 元素上使用 onMouseOver 或 onMouseLeave 会对用户操作的任何类型的移动做出反应。因此，从某种意义上说，您是在指示状态在用户移动鼠标时进行多次更新——这会产生闪烁。

您可能想要向您的处理程序添加去抖动以防止您的状态持续更新。

这里有一个关于如何实现的例子：https://codepen.io/snesjhon/pen/ewMKdG

下面是关于去抖功能的更多解释：Can someone explain the "debounce" function in Javascript

Reactjs 中 onMouseOver onMouseLeave 的意外行为

Unexpected behaviour onMouseOver onMouseLeave in Reactjs

onmouseover

onmouseout

reactjs