W jaki sposób mogę uzyskać dostęp do stanu najechania w responsjs?

Mam sidenav z wieloma drużynami koszykówki. Dlatego chciałbym wyświetlić coś innego dla każdego zespołu, gdy jeden z nich jest najechany kursorem. Używam również Reactjs, więc gdybym mógł mieć zmienną, którą mógłbym przekazać do innego komponentu, byłby niesamowity.

Komponenty React ujawniają wszystkie standardowe zdarzenia myszy JavaScript w swoim interfejsie najwyższego poziomu. Oczywiście nadal możesz używać :hoverw swoim CSS i może to być wystarczające dla niektórych Twoich potrzeb, ale dla bardziej zaawansowanych zachowań wywoływanych przez najechanie kursorem będziesz musiał użyć JavaScript. Aby zarządzać interakcjami po najechaniu, będziesz chciał używać onMouseEnteri onMouseLeave. Następnie dołączasz je do programów obsługi w komponencie w następujący sposób:

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

Następnie użyjesz kombinacji stanów / właściwości, aby przekazać zmieniony stan lub właściwości swoim podrzędnym komponentom React.

ReactJs definiuje następujące zdarzenia syntetyczne dla zdarzeń myszy:

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

Jak widać, nie ma zdarzenia najechania kursorem, ponieważ przeglądarki nie definiują zdarzenia najechania natywnie.

Będziesz chciał dodać programy obsługi dla onMouseEnter i onMouseLeave dla zachowania po najechaniu.

ReactJS Docs - Wydarzenia

Wiem Zaakceptowanych odpowiedź jest wielki, ale dla każdego, kto szuka dla zawisu jak dotyk można wykorzystać setTimeoutna mouseoveri zapisać uchwyt w mapie (od powiedzmy lista identyfikatorów setTimeout handle). Na mouseoverwyczyścić uchwyt z setTimeout i usunąć go z mapy

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

I zaimplementuj mapę w następujący sposób:

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

Mapa jest taka,

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

Wolę onMouseOveri onMouseOutponieważ dotyczy to również wszystkich dzieci w HTMLElement. Jeśli nie jest to wymagane, możesz użyć odpowiednio onMouseEnteri onMouseLeave.

Aby uzyskać efekt najechania, możesz po prostu wypróbować ten kod

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

Lub jeśli chcesz poradzić sobie z tą sytuacją za pomocą hooka useState (), możesz wypróbować ten fragment kodu

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

Oba powyższy kod będzie działał z efektem najechania, ale pierwsza procedura jest łatwiejsza do napisania i zrozumienia