Come posso accedere a uno stato hover in reactjs?

Ho un sidenav con un gruppo di squadre di basket. Quindi vorrei mostrare qualcosa di diverso per ogni squadra quando una di loro è in movimento. Inoltre, sto usando Reactjs quindi se potessi avere una variabile che potrei passare a un altro componente sarebbe fantastico.

I componenti React espongono tutti gli eventi del mouse JavaScript standard nella loro interfaccia di primo livello. Ovviamente puoi ancora usarlo :hovernel tuo CSS e questo potrebbe essere adeguato per alcune delle tue esigenze, ma per i comportamenti più avanzati innescati da un passaggio del mouse dovrai usare Javascript. Quindi, per gestire le interazioni al passaggio del mouse, ti consigliamo di utilizzare onMouseEntere onMouseLeave. Quindi li colleghi ai gestori nel tuo componente in questo modo:

<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>

Utilizzerai quindi una combinazione di state / props per passare lo stato o le proprietà modificati ai componenti React di tuo figlio.

ReactJs definisce i seguenti eventi sintetici per gli eventi del mouse:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Come puoi vedere non c'è alcun evento di passaggio del mouse, perché i browser non definiscono un evento di passaggio del mouse in modo nativo.

Dovrai aggiungere gestori per onMouseEnter e onMouseLeave per il comportamento del passaggio del mouse.

Documenti ReactJS - Eventi

So che la risposta accettata è grande, ma per chi è alla ricerca di un passaggio del mouse come il tatto è possibile utilizzare setTimeoutsul mouseovere salvare il manico in una mappa (di Lista diciamo id andiamo a setTimeout maniglia). Su mouseovercancella la maniglia da setTimeout ed eliminala dalla mappa

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

E implementa la mappa come segue:

onMouseOver(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = setTimeout(() => {
    scrollPreviewToComponentId(listId);
  }, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
  this.hoverHandleMap[listId] = handle;
}

onMouseOut(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = this.hoverHandleMap[listId];
  clearTimeout(handle);
  delete this.hoverHandleMap[listId];
}

E la mappa è così

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

Preferisco onMouseOvere onMouseOutperché vale anche per tutti i bambini in HTMLElement. Se questo non è richiesto, puoi usare onMouseEntere onMouseLeaverispettivamente.

Per avere l'effetto hover puoi semplicemente provare questo codice

import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

Oppure, se vuoi gestire questa situazione usando l'hook useState (), puoi provare questo pezzo di codice

import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

Entrambi i codici precedenti funzioneranno per l'effetto hover ma la prima procedura è più facile da scrivere e capire