Ereignis, wenn die Maus Blätter nicht erkannt wird

Question

Ich habe ein div die den Inhalt ändern, sollte es macht, wenn die Maus seiner Oberfläche betritt oder verlässt es:

Die div diesen Verfahren verbunden ist:

mouseOut: function() { 
    console.log("Mouse out!!!"); 
    this.setState({flipped: false}); 
    }, 

    mouseOver: function() { 
    console.log("Mouse over!!!"); 
    this.setState({flipped: true}); 
    }, 

Das Ereignis onMouseOver funktioniert gut. onMouseOut hat jedoch keinen Effekt und es sieht so aus, als ob die mouseOut-Funktion nicht aufgerufen wird.

Anstelle von mouseOut habe ich auch versucht onMouseLeave und onMouseDown aber immer noch gibt es keine Wirkung.

Wie kann ich die React-Komponente erkennen lassen, dass die Maus ausgezogen ist?

Answer 1

Es muss etwas falsch in der Art sein, wie Sie Teile Ihres Codes miteinander verdrahten, weil diese beiden Methoden vollkommen in Ordnung sind.

Hier ist ein funktionierendes Beispiel in JSFiddle:

React mouseOver and mouseOut

versuchen, dies zu Ihrem Code zu vergleichen, vielleicht können Sie den Unterschied erkennen. Dinge, die schief gehen können:

• Sie falsch Ihre Prop Namen. Ereignishandler sind camelCase - wenn Sie versehentlich den falschen Fall verwenden, zum Beispiel mouseout, werden sie ignoriert.
• Sie versehentlich den Rückgabewert Ihrer Funktion anstelle der Funktion selbst zuweisen, z. mouseOut={this.mouseOut()} - die Requisite wird undefiniert sein, nichts wird aufgerufen werden.