Як я можу отримати доступ до стану наведення в реакції?

У мене є сидева з купою баскетбольних команд. Тому я хотів би показати щось інше для кожної команди, коли наводиться курсор на одну з них. Крім того, я використовую 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 - Події

Я знаю , що загальноприйнятий відповідь великий , але для тих , хто шукає ширяння , як відчуваю , ви можете використовувати 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>
  );
}

Обидва вищезазначені коди будуть працювати для ефекту наведення, але першу процедуру легше написати та зрозуміти