javascript - 如何在鼠标事件 React JS 上终止组件状态

Question

当我将鼠标悬停在按钮上/离开按钮时，我有一个弹出窗口会打开/关闭，目前它在我的 Prop 中设置为 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>
     );
  }
}