আমি কীভাবে প্রতিক্রিয়াগুলিতে একটি হোভার রাজ্যে অ্যাক্সেস করতে পারি?

Question

আমার কাছে একগুচ্ছ বাস্কেটবল দল রয়েছে id সুতরাং আমি প্রতিটি দলের জন্য আলাদা কিছু প্রদর্শন করতে চাই যখন তাদের মধ্যে একটির উপরের দিকে .ুকে পড়ে। এছাড়াও, আমি রিএ্যাকটিজগুলি ব্যবহার করছি যাতে আমার যদি এমন কোনও ভেরিয়েবল থাকতে পারে যা আমি অন্য একটি উপাদানকে দিতে পারি যা দুর্দান্ত।

Comments

রিঅ্যাক্ট.জেজে হোভার বোতামের

— বেনটনকডিং

Answer 1

প্রতিক্রিয়াযুক্ত উপাদানগুলি তাদের শীর্ষ-স্তরের ইন্টারফেসে সমস্ত স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট মাউস ইভেন্টগুলিকে প্রকাশ করে। অবশ্যই, আপনি এখনও :hoverআপনার সিএসএসে ব্যবহার করতে পারেন , এবং এটি আপনার কিছু প্রয়োজনের জন্য পর্যাপ্ত হতে পারে তবে একটি জাভার স্ক্রিপ্ট ব্যবহার করা আপনার আরও প্রয়োজন a তাই হোভার ইন্টারঅ্যাকশন পরিচালনা করতে আপনি onMouseEnterএবং ব্যবহার করতে চাইবেন onMouseLeave। তারপরে আপনি এগুলিকে আপনার উপাদানগুলির হ্যান্ডলারের সাথে সংযুক্ত করুন:

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

তারপরে আপনি আপনার সন্তানের প্রতিক্রিয়ার উপাদানগুলিতে পরিবর্তিত রাষ্ট্র বা বৈশিষ্ট্যগুলি নীচে দেওয়ার জন্য কিছু রাজ্য / প্রপসের সংমিশ্রণ ব্যবহার করবেন।

Comments

ঠিক আছে, আমি মনে করি এটি কার্যকর হবে। আমাকে এটি পরীক্ষা করতে দিন। এছাড়াও, আমি কীভাবে এই পরিবর্তনশীলটিকে একটি পৃথক / সংযুক্ত অংশে পাস করতে পারি?

— ব্যবহারকারীর নাম

এটি আসলে জটিল হয়ে ওঠে, প্রতিক্রিয়া ঠিক এর জন্য সরবরাহ করে না। একটি ওয়েব অ্যাপ্লিকেশনের আর্কিটেকচারে, এটি বিশ্বব্যাপী যায়, ওভার-আর্চিং যোগাযোগের পদ্ধতি বেছে নেওয়া হয়েছে। অনেক লোক ইভেন্ট-বাস ধরণের সমাধান বেছে নেবে, যেখানে কিছু বিশ্বব্যাপী ইভেন্ট ম্যানেজার বিভিন্ন পোস্টগুলিতে ইভেন্টগুলি পোস্ট এবং গ্রহণ করছে। এই ইভেন্টের বার্তাগুলিতে আপনি যে তথ্যটি আর্গুমেন্ট হিসাবে পাস করতে চান তা ধারণ করবে। ফেসবুক তাদের

— ডক্সে

একটি জিনিস আমি যুক্ত করতে চাই তা হ'ল onMouseEnter onMouseLeaveডিওএম ইভেন্ট। তারা কোনও রীতিনীতিতে কাজ করবে না ReactComponent, আপনাকে ইভেন্টগুলি প্রপ হিসাবে পাস করতে হবে এবং এই ইভেন্টগুলিকে কোনও ডোম উপাদানটির সাথে আবদ্ধ করতে হবে ReactComponent, যেমন<div onMouseOver={ () => this.props.onMouseOver }>

— ডামিয়ান জিয়াং

Answer 2

ReactJs মাউস ইভেন্টগুলির জন্য নিম্নলিখিত সিন্থেটিক ইভেন্টগুলি সংজ্ঞায়িত করে:

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

আপনি দেখতে পাচ্ছেন যে কোনও হভার ইভেন্ট নেই, কারণ ব্রাউজারগুলি স্থানীয়ভাবে কোনও হোভার ইভেন্টটি সংজ্ঞায়িত করে না।

হোভার আচরণের জন্য আপনি onMouseEnter এবং onMouseLeave এর জন্য হ্যান্ডলার যুক্ত করতে চাইবেন।

ReactJS ডক্স - ইভেন্টগুলি

Answer 3

আমি জানি যে গৃহীত উত্তরটি দুর্দান্ত তবে যে কেউ হুভারের সন্ধান করছেন এমন অনুভূতির জন্য আপনি কোনও মানচিত্রে হ্যান্ডেলটি ব্যবহার setTimeoutকরতে mouseoverএবং সেভ করতে পারবেন (আসুন সেট টাইমআউট হ্যান্ডেলের তালিকার আইডিকে বলতে পারেন)। উপর 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।

Answer 4

হোভার ইফেক্ট থাকার জন্য আপনি কেবল এই কোডটি ব্যবহার করে দেখতে পারেন

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

অথবা আপনি যদি ইউজস্টেট () হুক ব্যবহার করে এই পরিস্থিতিটি পরিচালনা করতে চান তবে আপনি এই টুকরো কোডটি ব্যবহার করে দেখতে পারেন

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

উপরের কোডগুলি উভয়ই হোভার ইফেক্টের জন্য কাজ করবে তবে প্রথম পদ্ধতিটি লিখতে এবং বুঝতে সহজ