ฉันจะเข้าถึงสถานะโฮเวอร์ใน reactjs ได้อย่างไร

ฉันมี sidenav กับทีมบาสเก็ตบอลมากมาย ดังนั้นฉันจึงอยากจะแสดงสิ่งที่แตกต่างออกไปสำหรับแต่ละทีมเมื่อหนึ่งในนั้นถูกเลื่อน นอกจากนี้ฉันกำลังใช้ Reactjs ดังนั้นหากฉันมีตัวแปรที่ฉันสามารถส่งผ่านไปยังองค์ประกอบอื่นที่น่ากลัว

คอมโพเนนต์การตอบสนองจะแสดงเหตุการณ์ของเมาส์ Javascript มาตรฐานทั้งหมดในอินเทอร์เฟซระดับบนสุด แน่นอนคุณยังสามารถใช้:hoverใน CSS ของคุณได้และนั่นอาจเพียงพอสำหรับความต้องการบางอย่างของคุณ แต่สำหรับพฤติกรรมขั้นสูงที่เกิดจากการวางเมาส์คุณจะต้องใช้ Javascript ดังนั้นเพื่อจัดการปฏิสัมพันธ์โฉบคุณจะต้องการใช้และonMouseEnter onMouseLeaveจากนั้นคุณแนบเข้ากับตัวจัดการในส่วนประกอบของคุณดังนี้:

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

จากนั้นคุณจะใช้การรวมกันของสถานะ / อุปกรณ์ประกอบฉากเพื่อส่งต่อสถานะหรือคุณสมบัติที่เปลี่ยนแปลงไปยังองค์ประกอบปฏิกิริยาลูกของคุณ

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และบันทึกจับในแผนที่ (จาก Let 's รหัสรายการพูดเพื่อ setTimeout จับ) เมื่อ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 () hook คุณสามารถลองใช้โค้ดนี้ได้

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

โค้ดทั้งสองข้างบนนี้จะใช้งานได้กับ hover effect แต่ขั้นตอนแรกจะเขียนและเข้าใจได้ง่ายกว่า