Bagaimana saya bisa mengakses status hover di reactjs?

99

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.

hover reactjs

— Nama pengguna
sumber

kemungkinan duplikat tombol hover di react.js

— BentOnCoding

158

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.

— stolli
sumber

oke, saya pikir itu akan berhasil. biarkan saya mengujinya. juga, bagaimana cara meneruskan variabel ini ke komponen yang berbeda / tidak terhubung?

— Nama pengguna

1

Itu sebenarnya rumit, React tidak menyediakannya. Dalam arsitektur aplikasi web, itu masuk ke dalam metodologi komunikasi global yang menyeluruh yang dipilih. Banyak orang akan memilih solusi jenis bus acara, di mana beberapa pengelola acara global memposting dan menerima acara dalam komponen yang berbeda. Pesan acara ini akan berisi data yang ingin Anda teruskan sebagai argumen. Inilah yang disarankan Facebook dalam dokumen mereka tentang topik: facebook.github.io/react/tips/…

— stolli

2

Satu hal yang ingin saya tambahkan adalah onMouseEnter onMouseLeaveperistiwa DOM. Mereka tidak akan bekerja sesuai kebiasaan ReactComponent, Anda harus meneruskan acara sebagai penyangga dan mengikat acara ini ke elemen DOM di ReactComponent<div onMouseOver={ () => this.props.onMouseOver }>

— dalamnya

30

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

— BentOnCoding
sumber

1

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.

— Rishav
sumber

0

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

— Manusiawi
sumber