Wie man einen Komponentenstatus bei einem Mausereignis löscht React JS

Question

Ich habe ein Popup, das ein-/ausschaltet, wenn ich den Mauszeiger über/lasse eine Taste, momentan ist es in meinen Requisiten auf false gesetzt, ich möchte es auf true setzen Wenn also die Ladeseiten angezeigt werden, erscheint das Popup-Fenster, aber wenn der Benutzer darüber schwebt, wird der Status wieder auf "False" zurückgesetzt, sodass ich den Cursor erneut über den Bildschirm bewegen kann. Aber ich kann es nicht herausfinden.

<!-- language: lang-js --> 

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

Ich glaube, Sie brauchen eine zweite Variable, um zu überprüfen, ob Ihre Komponente zum ersten Mal geladen/gerendert wurde, Unten finden Sie ein einfaches Beispiel.

Answer 2

Sie haben die Herstellung von was Sie wollen, es ist noch nicht richtig angeschlossen.

Zuerst setzen Sie Ihre isHovered: true, so dass das Popup beim Laden der Seite erscheint.

Als nächstes ändern Sie die Funktion onMouseEnter und onMouseLeave-this.handleHover, das ist alles, was Sie tun sollen, müssen.