Ich habe ein sidenav mit einer Reihe von Basketball-Teams. Also würde ich gerne etwas anderes für jedes Team zeigen, wenn einer von ihnen darüber schwebt. Außerdem verwende ich Reactjs, also wenn ich eine Variable haben könnte, die ich zu einer anderen Komponente weitergeben könnte, die fantastisch wäre.Wie kann ich auf einen Hover-Status in reactjs zugreifen?
React-Komponenten zeigen alle standardmäßigen Javascript-Mausereignisse in ihrer Top-Level-Schnittstelle an. Natürlich können Sie immer noch :hover in Ihrem CSS verwenden, und das mag für einige Ihrer Bedürfnisse ausreichen, aber für die fortgeschritteneren Verhaltensweisen, die durch einen Hover ausgelöst werden, müssen Sie das Javascript verwenden. Um Hover-Interaktionen zu verwalten, sollten Sie also onMouseEnter und onMouseLeave verwenden. Sie legen sie dann an Handler in Ihrer Komponente wie folgt:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
Sie werden dann eine Kombination von Staat/Requisiten verwenden, um den Zustand geändert oder Eigenschaften bis zu Ihrem Kind passieren Komponenten reagieren.
okay, ich denke, das wird funktionieren. Lass es mich testen. Wie kann ich diese Variable an eine andere/nicht verbundene Komponente übergeben? – Username
Das wird eigentlich knifflig, dafür sorgt React nicht gerade. In der Architektur einer Web-App wird dies in die globale, übergreifende Kommunikationsmethodik gewählt. Viele Menschen würden sich für eine Event-Bus-Lösung entscheiden, bei der ein globaler Event-Manager Ereignisse in verschiedenen Komponenten posten und empfangen würde. Diese Ereignisnachrichten enthalten die Daten, die Sie als Argumente übergeben möchten. Dies schlägt Facebook in seinen Dokumenten zum Thema vor: https://facebook.github.io/react/tips/communicate-between-components.html – stolli
ReactJs definiert die folgenden synthetischen Ereignisse für Mausereignisse:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Wie Sie gibt es keine Hover-Ereignis sehen können, da Browser nativ ein Hover-Ereignis nicht definieren.
Sie möchten Handler für onMouseEnter und onMouseLeave für Hover-Verhalten hinzufügen.
möglich Duplikat [eine Hoverschaltfläche in react.js] (http://stackoverflow.com/questions/28072196/a-hover-button-in-react-js) – BentOnCoding