Làm cách nào để truy cập trạng thái di chuột trong reactjs?

Tôi có một buổi họp mặt với một loạt các đội bóng rổ. Vì vậy, tôi muốn hiển thị một cái gì đó khác nhau cho mỗi đội khi một trong số họ được di chuột qua. Ngoài ra, tôi đang sử dụng Reactjs vì vậy nếu tôi có thể có một biến mà tôi có thể chuyển sang một thành phần khác thì sẽ rất tuyệt.

Các thành phần React hiển thị tất cả các sự kiện chuột Javascript chuẩn trong giao diện cấp cao nhất của chúng. Tất nhiên, bạn vẫn có thể sử dụng :hovertrong CSS của mình và điều đó có thể đủ cho một số nhu cầu của bạn, nhưng đối với các hành vi nâng cao hơn được kích hoạt bởi di chuột, bạn sẽ cần sử dụng Javascript. Vì vậy, để quản lý các tương tác khi di chuột, bạn sẽ muốn sử dụng onMouseEntervà onMouseLeave. Sau đó, bạn đính kèm chúng vào các trình xử lý trong thành phần của mình như sau:

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

Sau đó, bạn sẽ sử dụng một số kết hợp trạng thái / đạo cụ để chuyển trạng thái hoặc thuộc tính đã thay đổi xuống các thành phần React con của bạn.

ReactJs định nghĩa các sự kiện tổng hợp sau cho các sự kiện chuột:

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

Như bạn có thể thấy, không có sự kiện di chuột nào, bởi vì các trình duyệt không xác định nguyên bản sự kiện di chuột.

Bạn sẽ muốn thêm trình xử lý cho onMouseEnter và onMouseLeave cho hành vi di chuột.

Tài liệu ReactJS - Sự kiện

Tôi biết câu trả lời được chấp nhận là rất tốt nhưng đối với những ai đang tìm kiếm một di chuột như cảm giác bạn có thể sử dụng setTimeouttrên mouseovervà lưu các xử lý trong một bản đồ (danh sách nói id let để setTimeout Xử lý). Khi mouseoverxóa tay cầm khỏi setTimeout và xóa nó khỏi bản đồ

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

Và thực hiện bản đồ như sau:

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

Và bản đồ giống như vậy,

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

Tôi thích hơn onMouseOvervà onMouseOutvì nó cũng áp dụng cho tất cả trẻ em trong HTMLElement. Nếu điều này không bắt buộc, bạn có thể sử dụng onMouseEntervà onMouseLeavetương ứng.

Để có hiệu ứng di chuột, bạn chỉ cần thử mã này

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

Hoặc nếu bạn muốn xử lý tình huống này bằng hook useState () thì bạn có thể thử đoạn mã này

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

Cả hai đoạn mã trên sẽ hoạt động cho hiệu ứng di chuột nhưng thủ tục đầu tiên dễ viết và dễ hiểu hơn