Ho un sidenav con un gruppo di squadre di basket. Quindi mi piacerebbe mostrare qualcosa di diverso per ogni squadra quando uno di questi è aleggiato. Inoltre, sto usando Reactjs quindi se potessi avere una variabile che potrei passare ad un altro componente sarebbe fantastico.Come posso accedere a uno stato di hover in reactjs?
I componenti React espongono tutti gli eventi del mouse Javascript standard nell'interfaccia di primo livello. Naturalmente, puoi ancora usare :hover nel tuo CSS, e questo potrebbe essere adeguato per alcune tue esigenze, ma per i comportamenti più avanzati attivati da un hover dovrai usare Javascript. Quindi, per gestire le interazioni al passaggio del mouse, ti consigliamo di utilizzare onMouseEnter e onMouseLeave. È quindi di allegarli a gestori nel componente in questo modo:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
Potrai quindi utilizzare una combinazione di Stato/puntelli di passare Stato o in cambiato verso il basso per il vostro bambino Reagire componenti.
va bene, penso funzionerà fammelo testare inoltre, come posso passare questa variabile a un componente diverso/non connesso? – Username
Che in realtà è complicato, React non lo fornisce esattamente. Nell'architettura di un'app Web, che entra nella metodologia di comunicazione globale e di massima importanza scelta. Molte persone sceglierebbero una soluzione tipo bus-evento, dove alcuni gestori di eventi globali pubblicano e ricevono eventi in componenti diversi. Questi messaggi di evento contengono i dati che si desidera passare come argomenti. Questo è ciò che Facebook suggerisce nei loro documenti sull'argomento: https://facebook.github.io/react/tips/communicate-between-components.html – stolli
ReactJs definisce i seguenti eventi sintetici per eventi del mouse:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Come si può vedere non c'è evento hover, perché i browser non definiscono un evento hover nativamente.
Si desidera aggiungere gestori per onMouseEnter e onMouseLeave per il comportamento al passaggio del mouse.
possibile duplicato di [un pulsante di puntatore a react.js] (http://stackoverflow.com/questions/28072196/a-hover-button-in-react-js) – BentOnCoding