मैं कैसे अभिकर्मकों में एक मंडराना राज्य का उपयोग कर सकता हूं?

Question 1

मेरे पास बास्केटबॉल टीमों के एक समूह के साथ एक सिडेनव है। इसलिए मैं प्रत्येक टीम के लिए कुछ अलग प्रदर्शित करना चाहूंगा, जब उनमें से एक पर मँडरा जा रहा हो। इसके अलावा, मैं रिएक्टज का उपयोग कर रहा हूं ताकि अगर मेरे पास एक चर हो सकता है जो मैं किसी अन्य घटक को पास कर सकता हूं जो भयानक होगा।

Question 2

प्रतिक्रिया घटक उनके शीर्ष-स्तरीय इंटरफ़ेस में सभी मानक जावास्क्रिप्ट माउस घटनाओं को उजागर करते हैं। बेशक, आप अभी भी :hoverअपने सीएसएस में उपयोग कर सकते हैं , और यह आपकी कुछ जरूरतों के लिए पर्याप्त हो सकता है, लेकिन होवर द्वारा ट्रिगर किए गए अधिक उन्नत व्यवहारों के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा। तो हॉवर इंटरैक्शन को प्रबंधित करने के लिए, आप उपयोग करना चाहेंगे onMouseEnterऔर onMouseLeave। फिर आप उन्हें अपने घटक में हैंडलर के साथ संलग्न करते हैं जैसे:

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

फिर आप बदले हुए राज्य या गुणों को अपने बच्चे के लिए प्रतिक्रियाशील घटकों को नीचे पारित करने के लिए राज्य / सहारा के कुछ संयोजन का उपयोग करेंगे।

Question 3

ReactJs माउस घटनाओं के लिए निम्नलिखित सिंथेटिक घटनाओं को परिभाषित करता है:

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

जैसा कि आप देख सकते हैं कि कोई हॉवर ईवेंट नहीं है, क्योंकि ब्राउज़र मूल रूप से हॉवर ईवेंट को परिभाषित नहीं करते हैं।

आप hover व्यवहार के लिए onMouseEnter और onMouseLeave के लिए हैंडलर जोड़ना चाहेंगे।

ReactJS डॉक्स - ईवेंट

Question 4

मैं जानता हूँ कि स्वीकार किए जाते हैं जवाब बहुत अच्छा है, लेकिन किसी के लिए जो लग रहा है की तरह एक हॉवर आप उपयोग कर सकते हैं की तलाश में है setTimeoutपर mouseoverऔर (setTimeout को संभालने के लिए आइए कहना सूची आईडी की) एक नक्शे में संभाल सहेजें। पर mouseoversetTimeout से संभाल स्पष्ट और नक्शे से हटा

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क्रमशः।

Question 5

होवर प्रभाव के लिए आप बस इस कोड को आज़मा सकते हैं

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

उपरोक्त दोनों कोड हॉवर प्रभाव के लिए काम करेंगे लेकिन पहली प्रक्रिया लिखना और समझना आसान है