如何终止鼠标事件 React JS 上的组件状态

Question

>我有一个弹出窗口，当我将鼠标悬停在按钮上/离开按钮上时会打开/关闭，目前它在我的道具中设置为 false，我想将其设置为 true，这样当加载页面您看到弹出窗口时，但当使用悬停在它上面时，状态会重置回 false，这样我就可以再次将鼠标悬停在它上面并查看它， 但我似乎想不通。

class App extends Component {
 constructor(props) {
    super(props);
   this.state = { isHovered: false };
   this.handleHover = this.handleHover.bind(this);
 
 }
 handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
 }
 render() {
    const box = this.state.isHovered ? "box open" : "box";
    return(
       <a className="spot1" 
          onMouseEnter={this.handleHover} 
          onMouseLeave={this.handleHover}>
      </a>
      <div className={box}>
         <p>Lorem ipsum dolor si</p>
      </div>
    )
}

Answer 1

我相信

你需要第二个变量来检查你的组件是否是第一次加载/渲染的，您可以在下面找到一个简单的示例。

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {loaded : true, hovered : false};
  }
  popState () {
    const {loaded, hovered} = this.state; 
    // check if the component was loaded
    // which will be only once
    // because the state for loaded will be set to false
    if (loaded) {
        return this.setState({
          hovered : !hovered,
          loaded : false
        });
    }
    this.setState({
      hovered : !hovered
    });
  }
  render () {
    const {loaded, hovered} = this.state;
    let box;
    // first page reload
    if (loaded) {
      box = 'show';
    } else {
      box = hovered ? 'show' : 'hide';
    }
    return (
      <a 
        onMouseEnter={this.popState.bind(this)} 
        onMouseLeave={this.popState.bind(this)}>
        My link
        <div 
          className={box}>Tooltip</div>
      </a>
     );
  }
}

Answer 2

你有你想要的东西，它还没有正确连接。

首先，设置isHovered: true，以便在页面加载时显示弹出窗口。

接下来，将函数onMouseEnter和onMouseLeave更改为 this.handleHover ，这就是您应该做的全部工作。