প্রতিক্রিয়াতে কীভাবে Esc কী প্রেস সনাক্ত করবেন এবং কীভাবে এটি পরিচালনা করবেন

Question

আমি কীভাবে প্রতিক্রিয়াতে এসএসসি কী টিপস সনাক্ত করতে পারি? Jquery একই জিনিস

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

একবার সনাক্ত হয়ে গেলে আমি তথ্যগুলি উপাদানগুলি পাস করতে চাই। আমার কাছে 3 টি উপাদান রয়েছে যার মধ্যে শেষ সক্রিয় উপাদানটির অব্যাহতি কী টিপে প্রতিক্রিয়া দেখাতে হবে।

যখন কোনও উপাদান সক্রিয় হয় তখন আমি এক ধরণের নিবন্ধকরণের কথা ভাবছিলাম

class Layout extends React.Component {
  onActive(escFunction){
    this.escFunction = escFunction;
  }
  onEscPress(){
   if(_.isFunction(this.escFunction)){
      this.escFunction()
   }
  }
  render(){
    return (
      <div class="root">
        <ActionPanel onActive={this.onActive.bind(this)}/>
        <DataPanel onActive={this.onActive.bind(this)}/>
        <ResultPanel onActive={this.onActive.bind(this)}/>
      </div>
    )
  }
}

এবং সমস্ত উপাদান

class ActionPanel extends React.Component {
  escFunction(){
   //Do whatever when esc is pressed
  }
  onActive(){
    this.props.onActive(this.escFunction.bind(this));
  }
  render(){
    return (   
      <input onKeyDown={this.onActive.bind(this)}/>
    )
  }
}

আমি বিশ্বাস করি এটি কার্যকর হবে তবে আমি মনে করি এটি কলব্যাকের মতো আরও হবে। এটি পরিচালনা করার আরও ভাল উপায় আছে কি?

Comments

আপনার কি সংরক্ষণের জন্য কোনও ফ্লাক্স বাস্তবায়ন নেই যা এইভাবে এটি করার পরিবর্তে সক্রিয় উপাদান?

— বেন হরে

@ বেনহেয়ার: আমি এখনও এটিতে বেশ নতুন। আমি প্রতিক্রিয়াতে স্থানান্তরিত করার সম্ভাব্যতাটি খতিয়ে দেখছি। আমি প্রবাহের চেষ্টা করিনি, সুতরাং আপনি পরামর্শ দিচ্ছেন সমাধানের জন্য আমার প্রবাহের দিকে নজর দেওয়া উচিত। PS: কীভাবে ESC কী টিপস সনাক্ত করা যায়?

— নিও

কেবল স্পষ্ট করে বলার জন্য, আপনি কি প্রথম কোড ব্লকের মতো নথির স্তরে কি-পিস সনাক্তকরণের সন্ধান করছেন? অথবা এটি কোনও ইনপুট ক্ষেত্রের জন্য? আপনি যে কোনটি করতে পারেন, আমি উত্তর ফ্রেম কীভাবে করব তা নিশ্চিত নই। এখানে একটি দস্তাবেজ-স্তরের উদাহরণ রয়েছে উদাহরণস্বরূপ: কোডেপেন.আইও

— ব্র্যাড

নথির স্তরটি ঠিক থাকবে :)

— নিও

Answer 1

আপনি যদি কোনও নথি-স্তরের কী ইভেন্ট হ্যান্ডলিং সন্ধান করছেন, তবে এটির সময়কালে বাঁধাই componentDidMountহ'ল সর্বোত্তম উপায় (যেমন ব্র্যাড কলথার্স্টের কোডেপেন উদাহরণ দ্বারা দেখানো হয়েছে ):

class ActionPanel extends React.Component {
  constructor(props){
    super(props);
    this.escFunction = this.escFunction.bind(this);
  }
  escFunction(event){
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }
  componentDidMount(){
    document.addEventListener("keydown", this.escFunction, false);
  }
  componentWillUnmount(){
    document.removeEventListener("keydown", this.escFunction, false);
  }
  render(){
    return (   
      <input/>
    )
  }
}

নোট করুন যে আপনার সম্ভাব্য ত্রুটি এবং মেমরির ফাঁস রোধ করতে আনমাউন্টে মূল ইভেন্ট শ্রোতাদের অপসারণ করা উচিত।

সম্পাদনা: আপনি যদি হুক ব্যবহার করছেন তবে আপনি useEffectএকই কাঠামো তৈরি করতে এই কাঠামোটি ব্যবহার করতে পারেন :

const ActionPanel = (props) => {
  const escFunction = useCallback((event) => {
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }, []);

  useEffect(() => {
    document.addEventListener("keydown", escFunction, false);

    return () => {
      document.removeEventListener("keydown", escFunction, false);
    };
  }, []);

  return (   
    <input />
  )
};

Comments

এর মধ্যে তৃতীয় যুক্তি কী addEventListenerএবং removeEventListener?

— ঝুয়াং

@ ঝুয়াং বিকাশকারী.মোজিলা.আর.ইন- ইউএস

— জুলিও সাইতো

@ ঝুয়াং এটি ব্যবহারের ক্যাপচার যুক্তি যা সাধারণভাবে পছন্দ করে না এমনfocus ইভেন্টগুলি ক্যাপচার করতে হবে কিনা তা নির্দিষ্ট করে । এটি এর জন্য প্রাসঙ্গিক নয় keydownতবে এটি optionচ্ছিকভাবে ব্যবহৃত হত না তাই এটি সাধারণত আই <9 এর সাথে সামঞ্জস্যের জন্য নির্দিষ্ট করা হয়।

— চেজ স্যান্ডম্যান

আমাকে this.escFunctionযেমন একটি ফাংশনে function() { this.escFunction(event) }আবদ্ধ করতে হয়েছিল, অন্যথায় এটি কোনও "কীডাউন" না করে পৃষ্ঠা লোড এ চালানো হয়েছিল।

— M3RS

তৃতীয় যুক্তি হিসাবে 'মিথ্যা' অন্তর্ভুক্ত করার দরকার নেই। এটি ডিফল্টরূপে মিথ্যা।

— NattyC

Answer 2

আপনি প্রতিক্রিয়াkeyCode থেকে পালানোর (27) এর জন্য শুনতে চাইবেন :SyntheticKeyBoardEvent onKeyDown

const EscapeListen = React.createClass({
  handleKeyDown: function(e) {
    if (e.keyCode === 27) {
      console.log('You pressed the escape key!')
    }
  },

  render: function() {
    return (
      <input type='text'
             onKeyDown={this.handleKeyDown} />
    )
  }
})

ব্র্যাড কলথার্স্টের কোডপেন প্রশ্নের মন্তব্যে পোস্ট করা অন্যান্য কীগুলির কী কোড সন্ধানে সহায়ক।

Comments

আমি যোগ করেন যে প্রতিক্রিয়া মনে হচ্ছে এটা মূল্য মনে না আগুন onKeyPressঘটনা যখন চাবি টেপা হচ্ছে চট্টগ্রাম সিটি কর্পোরেশন এবং ফোকাস ভিতরে <input type="text" />। যে পরিস্থিতিতে, আপনি ব্যবহার করতে পারেন onKeyDownএবং onKeyUpউভয় যা আগুনের এবং সঠিক অনুক্রমে।

— টম

Answer 3

কার্যক্ষম উপাদানটিতে এটি সম্পাদন করার আর একটি উপায় হ'ল ব্যবহার useEffectএবং এর useFunctionমতো:

import React, { useEffect } from 'react';

const App = () => {


  useEffect(() => {
    const handleEsc = (event) => {
       if (event.keyCode === 27) {
        console.log('Close')
      }
    };
    window.addEventListener('keydown', handleEsc);

    return () => {
      window.removeEventListener('keydown', handleEsc);
    };
  }, []);

  return(<p>Press ESC to console log "Close"</p>);
}

কনসোল.লগের পরিবর্তে, আপনি useStateকিছু ট্রিগার করতে ব্যবহার করতে পারেন ।

Answer 4

প্রতিক্রিয়া স্থানীয় ব্রাউজার ইভেন্টটি মোড়ানোর জন্য সিনথেটিক কীবোর্ড ইভেন্ট ব্যবহার করে এবং এই সিন্থেটিক ইভেন্টটি নামযুক্ত কী বৈশিষ্ট্য সরবরাহ করে ,
যা আপনি এটির মতো ব্যবহার করতে পারেন:

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

Comments

মজার বিষয় আপনি, IE9 এবং / অথবা ফায়ারফক্স 36 অথবা নীচের সমর্থন করার জন্য প্রয়োজন হলে e.keyজন্য Escapeযেমন ফিরে আসে Esc#triggered

— আগস্ট

Answer 5

পুনরায় ব্যবহারযোগ্য প্রতিক্রিয়া হুক সমাধানের জন্য

import React, { useEffect } from 'react';

const useEscape = (onEscape) => {
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) 
                onEscape();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, []);
}

export default useEscape

ব্যবহার:

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))

Comments

সমাধানটি অনস্ক্রিয় ফাংশন পরিবর্তনের অনুমতি দেয় না। আপনার ব্যবহারের জন্য ডেপু অ্যারে হিসাবে মেমোটি ব্যবহার করুন এবং অনস্ক্রপটি পাস করতে হবে

— নিও