Bagaimana saya bisa mengakses status hover di reactjs?

Saya memiliki sidenav dengan sekelompok tim bola basket. Jadi saya ingin menampilkan sesuatu yang berbeda untuk setiap tim ketika salah satu dari mereka diarahkan. Juga, saya menggunakan Reactjs jadi jika saya bisa memiliki variabel yang bisa saya berikan ke komponen lain yang akan luar biasa.

Komponen React menampilkan semua event mouse Javascript standar di antarmuka tingkat atas mereka. Tentu saja, Anda masih dapat menggunakan :hoverCSS Anda, dan itu mungkin cukup untuk beberapa kebutuhan Anda, tetapi untuk perilaku lebih lanjut yang dipicu oleh hover, Anda harus menggunakan Javascript. Jadi untuk mengelola interaksi hover, Anda akan ingin menggunakan onMouseEnterdan onMouseLeave. Anda kemudian memasangnya ke penangan di komponen Anda seperti ini:

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

Anda kemudian akan menggunakan beberapa kombinasi state / props untuk meneruskan status atau properti yang diubah ke komponen React anak Anda.

ReactJs mendefinisikan kejadian sintetis berikut untuk kejadian mouse:

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

Seperti yang Anda lihat, tidak ada peristiwa hover, karena browser tidak mendefinisikan peristiwa hover secara native.

Anda akan ingin menambahkan penangan untuk onMouseEnter dan onMouseLeave untuk perilaku hover.

ReactJS Docs - Acara

Aku tahu jawaban yang diterima adalah besar, tetapi untuk siapa saja yang mencari hover seperti merasa Anda dapat menggunakan setTimeoutdi mouseoverdan menyimpan pegangan dalam peta (katakanlah daftar id untuk Handle setTimeout). Pada mouseovermembersihkan pegangan dari setTimeout dan menghapusnya dari peta

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

Dan implementasikan peta sebagai berikut:

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

Dan petanya seperti itu,

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

Saya lebih suka onMouseOverdan onMouseOutkarena itu juga berlaku untuk semua anak di HTMLElement. Jika ini tidak diperlukan, Anda dapat menggunakan onMouseEnterdan onMouseLeavemasing - masing.

Untuk mendapatkan efek hover, Anda dapat mencoba kode ini

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

Atau jika Anda ingin menangani situasi ini menggunakan hook useState () maka Anda dapat mencoba bagian kode ini

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

Kedua kode di atas akan berfungsi untuk efek hover tetapi prosedur pertama lebih mudah untuk ditulis dan dipahami