Question

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

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

这是一个练习的码本 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

React.js中意外的行为onMouseOver onMouseLeave

1 个答案: