Как я могу получить доступ к состоянию наведения в reactjs?

У меня есть помощник с кучей баскетбольных команд. Поэтому я хотел бы показать что-то свое для каждой команды, когда над одной из них зависает. Кроме того, я использую Reactjs, поэтому, если бы у меня была переменная, которую я мог бы передать другому компоненту, это было бы здорово.

Компоненты React предоставляют все стандартные события мыши Javascript в своем интерфейсе верхнего уровня. Конечно, вы все еще можете использовать :hoverв своем CSS, и этого может быть достаточно для некоторых из ваших потребностей, но для более продвинутого поведения, запускаемого при наведении курсора, вам необходимо использовать Javascript. Итак, чтобы управлять взаимодействиями при наведении курсора, вы захотите использовать onMouseEnterи onMouseLeave. Затем вы прикрепляете их к обработчикам в своем компоненте следующим образом:

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

Затем вы будете использовать некоторую комбинацию состояния / свойств для передачи измененного состояния или свойств своим дочерним компонентам React.

ReactJs определяет следующие синтетические события для событий мыши:

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

Как видите, события зависания нет, потому что браузеры изначально не определяют событие наведения.

Вы захотите добавить обработчики для onMouseEnter и onMouseLeave для поведения при наведении курсора.

ReactJS Docs - События

Я знаю , что общепринятый ответ велик , но для тех , кто ищет парения , как чувствую , вы можете использовать setTimeoutна mouseoverи сохранить ручку на карте (скажем список идентификаторов ДАВАЙТЕ к SetTimeout Handle). На mouseoverочистить ручку от SetTimeout и удалить его с карты

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

И реализуем карту следующим образом:

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

А карта такая,

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

Я предпочитаю, onMouseOverи onMouseOutпотому что это также применимо ко всем детям в HTMLElement. Если это не требуется, вы можете использовать onMouseEnterи onMouseLeaveсоответственно.

Для создания эффекта наведения вы можете просто попробовать этот код

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

Или, если вы хотите справиться с этой ситуацией с помощью хука useState (), вы можете попробовать этот фрагмент кода

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

Оба приведенных выше кода будут работать для эффекта наведения, но первую процедуру легче написать и понять.