¿Cómo puedo acceder a un estado de desplazamiento en reactjs?

Tengo una navegación lateral con un montón de equipos de baloncesto. Así que me gustaría mostrar algo diferente para cada equipo cuando se pasa el cursor sobre uno de ellos. Además, estoy usando Reactjs, así que si pudiera tener una variable que pudiera pasar a otro componente, sería increíble.

Los componentes de React exponen todos los eventos de mouse estándar de Javascript en su interfaz de nivel superior. Por supuesto, aún puede usarlo :hoveren su CSS, y eso puede ser adecuado para algunas de sus necesidades, pero para los comportamientos más avanzados activados por un desplazamiento, deberá usar Javascript. Entonces, para administrar las interacciones de desplazamiento, querrá usar onMouseEntery onMouseLeave. Luego, los adjunta a los controladores en su componente de la siguiente manera:

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

Luego, usará alguna combinación de estado / accesorios para pasar el estado o las propiedades modificadas a sus componentes secundarios de React.

ReactJs define los siguientes 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 puede ver, no hay ningún evento de desplazamiento, porque los navegadores no definen un evento de desplazamiento de forma nativa.

Querrá agregar controladores para onMouseEnter y onMouseLeave para el comportamiento de desplazamiento.

ReactJS Docs - Eventos

Sé que la respuesta aceptada es grande, pero para cualquier persona que esté buscando un vuelo estacionario como la sensación puede utilizar setTimeouten mouseovery guardar el mango en un mapa (de la lista de identificadores de digamos vamos a setTimeout Mango). Al mouseoverborrar el identificador de setTimeout y eliminarlo del mapa

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

E implemente el mapa de la siguiente manera:

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

Y el mapa es así

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

Yo prefiero onMouseOvery onMouseOutporque también se aplica a todos los niños del HTMLElement. Si no es necesario, puede utilizar onMouseEntery onMouseLeaverespectivamente.

Para tener efecto de desplazamiento, simplemente puede probar 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>
      );
    }

O si desea manejar esta situación usando useState () hook, puede probar este 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 códigos anteriores funcionarán para el efecto de desplazamiento, pero el primer procedimiento es más fácil de escribir y comprender