Como posso acessar um estado hover em reactjs?

Tenho um sidenav com vários times de basquete. Portanto, gostaria de mostrar algo diferente para cada equipe quando um deles está sendo pairado. Além disso, estou usando Reactjs, então se eu pudesse ter uma variável que pudesse passar para outro componente, seria incrível.

Os componentes React expõem todos os eventos de mouse Javascript padrão em sua interface de nível superior. Claro, você ainda pode usar :hoverem seu CSS, e isso pode ser adequado para algumas de suas necessidades, mas para os comportamentos mais avançados acionados por um passar do mouse você precisará usar o Javascript. Portanto, para gerenciar as interações de foco, você vai querer usar onMouseEntere onMouseLeave. Em seguida, você os anexa aos manipuladores em seu componente da seguinte forma:

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

Em seguida, você usará alguma combinação de estado / props para passar o estado alterado ou as propriedades aos componentes do React filho.

ReactJs define os seguintes eventos sintéticos para eventos de mouse:

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

Como você pode ver, não há evento de foco, porque os navegadores não definem um evento de foco nativamente.

Você desejará adicionar manipuladores para onMouseEnter e onMouseLeave para comportamento de foco.

ReactJS Docs - Eventos

Eu sei a resposta aceita é grande, mas para quem está à procura de um hover como a sensação que você pode usar setTimeoutem mouseovere salvar o punho em um mapa (de, digamos lista ids deixou-nos para setTimeout Handle). Em mouseoverlimpar o identificador de setTimeout e excluí-lo do mapa

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

E implemente o mapa da seguinte maneira:

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 o mapa é assim,

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

Eu prefiro onMouseOvere onMouseOutporque também se aplica a todas as crianças do HTMLElement. Se isso não for necessário, você pode usar onMouseEntere onMouseLeaverespectivamente.

Para ter efeito de foco, você pode simplesmente tentar este código

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>
      );
    }

Ou se você quiser lidar com essa situação usando o gancho useState (), você pode tentar este trecho de código

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>
  );
}

Ambos os códigos acima funcionarão para efeito de foco, mas o primeiro procedimento é mais fácil de escrever e entender