如何在鼠标事件 React JS 上杀死组件状态

Question

I have a popup that turns on/off when I hover over/leave a button, currently it's set to false in my props, I would like to set it to true so when the load pages you see the pop up but when the use hovers over it, the state resets back to false so I can hover over it again and see it, but I can't seem to figure it out.

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

I believe you need a second variable to check if your component was loaded/rendered for first time, Below you can find a simple example.

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

You have the making of what you want, it's not hooked up correctly yet.

First, set your isHovered: true so that the popup appears on page load.

Next, change the function onMouseEnter and onMouseLeave to this.handleHover , that's all you should need to do.