Wie können Sie in InctJS entweder ein Schwebeereignis oder ein aktives Ereignis erzielen, wenn Sie Inline-Styling durchführen?
Ich habe festgestellt, dass der Ansatz onMouseEnter, onMouseLeave fehlerhaft ist, und hoffe, dass es einen anderen Weg gibt, dies zu tun.
Insbesondere wenn Sie sehr schnell mit der Maus über eine Komponente fahren, wird nur das Ereignis onMouseEnter registriert. Die onMouseLeave wird nie ausgelöst und kann daher den Status nicht aktualisieren. Die Komponente wird so angezeigt, als würde sie immer noch über den Mauszeiger bewegt. Ich habe das Gleiche bemerkt, wenn Sie versuchen, die CSS-Pseudoklasse ": active" nachzuahmen. Wenn Sie sehr schnell klicken, wird nur das Ereignis onMouseDown registriert. Das Ereignis onMouseUp wird ignoriert. Die Komponente bleibt aktiv.
Hier ist eine JSFiddle, die das Problem zeigt: https://jsfiddle.net/y9swecyu/5/
Video von JSFiddle mit Problem: https://vid.me/ZJEO
Der Code:
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function() {
this.setState({
hover: true
});
console.log('enter');
},
onMouseLeaveHandler: function() {
this.setState({
hover: false
});
console.log('leave');
},
render: function() {
var inner = normal;
if(this.state.hover) {
inner = hover;
}
return (
<div style={outer}>
<div style={inner}
onMouseEnter={this.onMouseEnterHandler}
onMouseLeave={this.onMouseLeaveHandler} >
{this.props.children}
</div>
</div>
);
}
});
var outer = {
height: '120px',
width: '200px',
margin: '100px',
backgroundColor: 'green',
cursor: 'pointer',
position: 'relative'
}
var normal = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 0
}
var hover = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 1
}
React.render(
<Hover></Hover>,
document.getElementById('container')
)
quelle
Antworten:
Haben Sie eines davon ausprobiert?
onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
SyntheticEvent
es wird auch Folgendes erwähnt:
React normalisiert Ereignisse so, dass sie über verschiedene Browser hinweg konsistente Eigenschaften haben.
Die folgenden Ereignishandler werden durch ein Ereignis in der Blasenphase ausgelöst. Um einen Ereignishandler für die Erfassungsphase zu registrieren, hängen Sie die Erfassung an den Ereignisnamen an. Anstatt onClick zu verwenden, würden Sie beispielsweise onClickCapture verwenden, um das Klickereignis in der Erfassungsphase zu behandeln.
quelle
The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Die vorherigen Antworten sind ziemlich verwirrend. Sie benötigen weder einen Reaktionszustand, um dies zu lösen, noch eine spezielle externe Bibliothek. Es kann mit reinem CSS / Sass erreicht werden:
Der Style:
Die Reaktionskomponente
Eine einfache
Hover
Pure-Rendering-Funktion:Verwendung
Dann benutze es so:
quelle
Sie können verwenden
onMouseOver={this.onToggleOpen}
undonMouseOut={this.onToggleOpen}
über Komponenten nachdenkenquelle
Wenn Sie eine kleine Demo mit dem Fehler onMouseEnter / onMouseLeave oder onMouseDown / onMouseUp erstellen können, lohnt es sich, sie auf der ReactJS-Problemseite oder in der Mailingliste zu veröffentlichen, um die Frage zu stellen und zu erfahren, was die Entwickler dazu zu sagen haben.
In Ihrem Anwendungsfall scheinen Sie zu implizieren, dass CSS: hover und: active-Zustände für Ihre Zwecke ausreichen würden. Ich schlage daher vor, dass Sie sie verwenden. CSS ist um Größenordnungen schneller und zuverlässiger als Javascript, da es direkt im Browser implementiert ist.
Die Zustände: hover und: active können jedoch nicht in Inline-Stilen angegeben werden. Sie können Ihren Elementen eine ID oder einen Klassennamen zuweisen und Ihre Stile entweder in ein Stylesheet schreiben, wenn sie in Ihrer Anwendung etwas konstant sind, oder in ein dynamisch generiertes
<style>
Tag.Hier ist ein Beispiel für die letztere Technik: https://jsfiddle.net/ors1vos9/
quelle
Eine einfache
css
Lösung.Für die Anwendung grundlegender Stile ist CSS in 99% der Fälle einfacher und leistungsfähiger als JS-Lösungen. (Obwohl modernere CSS-in-JS-Lösungen - z. B. React Components usw. - wahrscheinlich besser zu warten sind.)
Führen Sie dieses Code-Snippet aus, um es in Aktion zu sehen.
quelle
more performant that JS solutions 99% of the time
nicht wahr. Lesen Sie Artikel, die diesen Mythos entlarven. Hast du eine Quelle?Ich bin gerade auf dasselbe Problem gestoßen, als ich auf einer deaktivierten Schaltfläche auf onMouseLeave-Ereignisse gewartet habe. Ich habe es umgangen, indem ich auf das native Mouseleave-Ereignis für ein Element gewartet habe, das die deaktivierte Schaltfläche umschließt.
Hier ist eine Geige https://jsfiddle.net/qfLzkz5x/8/
quelle
onMouseLeave
-EventEin aufgerufenes Paket
styled-components
kann dieses Problem auf ELEGANTE Weise lösen .Referenz
Beispiel
quelle
Sie können nicht mit Inline-Styling allein. Empfehlen Sie nicht, CSS-Funktionen in JavaScript erneut zu implementieren. Wir haben bereits eine Sprache, die extrem leistungsfähig und unglaublich schnell für diesen Anwendungsfall ist - CSS. Also benutze es! Made Style It zur Unterstützung.
npm install style-it --save
Funktionssyntax ( JSFIDDLE )
JSX-Syntax ( JSFIDDLE )
quelle
Verwenden Sie Radium !
Das Folgende ist ein Beispiel von ihrer Website:
quelle
Ich würde onMouseOver & onMouseOut verwenden. Ursache in Reaktion
Hier ist es in der React- Dokumentation für Mausereignisse.
quelle
Ich hatte ein ähnliches Problem, als onMouseEnter aufgerufen wurde, aber manchmal wurde das entsprechende onMouseLeave-Ereignis nicht ausgelöst. Hier ist eine Problemumgehung, die für mich gut funktioniert (sie basiert teilweise auf jQuery):
Siehe auf jsfiddle: http://jsfiddle.net/qtbr5cg6/1/
Warum geschah es (in meinem Fall): Ich führe eine jQuery-Bildlaufanimation (durch
$('#item').animate({ scrollTop: 0 })
) aus, wenn ich auf das Element klicke. Der Cursor verlässt das Element also nicht "natürlich", sondern während einer JavaScript-gesteuerten Animation ... und in diesem Fall wurde onMouseLeave von React (React 15.3.0, Chrome 51, Desktop) nicht ordnungsgemäß ausgelöst.quelle
Ich weiß, dass es eine Weile her ist, seit diese Frage gestellt wurde, aber ich stoße auf das gleiche Problem der Inkonsistenz mit onMouseLeave (). Ich habe onMouseOut () für die Dropdown-Liste verwendet und beim Verlassen der Maus für das gesamte Menü zuverlässig und funktioniert jedes Mal, wenn ich es getestet habe. Ich habe die Ereignisse hier in den Dokumenten gesehen: https://facebook.github.io/react/docs/events.html#mouse-events Hier ist ein Beispiel mit https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp ::
quelle
Ich persönlich verwende Style It für den Inline-Stil in React oder behalte meinen Stil separat in einer CSS- oder SASS- Datei ...
Aber wenn Sie wirklich daran interessiert sind, es inline zu tun, schauen Sie sich die Bibliothek an. Ich teile einige der folgenden Verwendungen:
In der Komponente :
Ausgabe :
Sie können auch JavaScript-Variablen mit Hover in Ihrem CSS wie folgt verwenden:
Und das Ergebnis wie folgt:
quelle
Ich persönlich finde es, Emotion zu verwenden, um solche Stile zu verwalten. Emotion ist eine CSS-in-JS-Bibliothek, mit der Sie die Verwaltung von React-Stilen je nach Ihren Vorlieben vereinfachen können, im Gegensatz zu Inline-Stilen wie in Ihrem Beispiel. Hier finden Sie weitere Informationen dazu https://emotion.sh/docs/introduction Ich hoffe, dies hilft Ihnen.
Hier ist ein einfaches Emotion-Beispiel, das einem Div beim Schweben einen Zeiger und eine Farbänderung hinzufügt:
quelle