কীভাবে react.js এ এন্টার কী ব্যবহার করে একটি ফর্ম জমা করবেন?

Question 1

এখানে আমার ফর্ম এবং অনক্লিক পদ্ধতিটি। কীবোর্ডের এন্টার বোতামটি চাপলে আমি এই পদ্ধতিটি সম্পাদন করতে চাই। কীভাবে?

NB: কোন jquery প্রশংসা করা হয় না।

 comment: function (e) {
        e.preventDefault();
        this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
    },


 <form className="commentForm">
     <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
    <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
     <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
    </form>

Question 2

পরিবর্তন <button type="button"করুন <button type="submit"। সরান onClick। পরিবর্তে না <form className="commentForm" onSubmit={this.onFormSubmit}>। এটিতে বোতামটি ক্লিক করা এবং রিটার্ন কী টিপতে হবে।

onFormSubmit = e => {
  e.preventDefault();
  const { name, email } = this.state;
  // send to server with e.g. `window.fetch`
}

...

<form onSubmit={this.onFormSubmit}>
  ...
  <button type="submit">Submit</button>
</form>

Question 3

keydownএটি করার জন্য ইভেন্টটি ব্যবহার করুন :

   input: HTMLDivElement | null = null;

   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
      // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
      if (event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation();
        this.onSubmit();
      }
    }

    onSubmit = (): void => {
      if (input.textContent) {
         this.props.onSubmit(input.textContent);
         input.focus();
         input.textContent = '';
      }
    }

    render() {
      return (
         <form className="commentForm">
           <input
             className="comment-input"
             aria-multiline="true"
             role="textbox"
             contentEditable={true}
             onKeyDown={this.onKeyDown}
             ref={node => this.input = node} 
           />
           <button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
         </form>
      );
    }

Question 4

এই প্রশ্নের শেষ উত্তরটি পেয়ে বেশ কয়েক বছর হয়ে গেছে। প্রতিক্রিয়া "হুকস" 2017 সালে ফিরে এসেছিল, এবং "কী কোড" হ্রাস করা হয়েছে।

এখন আমরা এটি লিখতে পারি:

  useEffect(() => {
    const listener = event => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        console.log("Enter key was pressed. Run your function.");
        // callMyFunction();
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);

keydownউপাদানটি প্রথমবারের জন্য লোড করা হলে এটি ইভেন্টটিতে শ্রোতাদের নিবন্ধভুক্ত করে । উপাদানটি নষ্ট হয়ে গেলে এটি ইভেন্ট শ্রোতাদের সরিয়ে দেয়।

Question 5

আপনি যদি "এন্টার" কীটি শুনতে চান তবে আপনি এটি করেন। একটি অনকিডাউন প্রোপ রয়েছে যা আপনি ব্যবহার করতে পারেন এবং আপনি এটি সম্পর্কে প্রতিক্রিয়া ডকটিতে পড়তে পারেন

এবং এখানে একটি কোডস্যান্ডবক্স রয়েছে

const App = () => {
    const something=(event)=> {
        if (event.keyCode === 13) {
            console.log('enter')
        }
    }
return (
    <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input  type='text' onKeyDown={(e) => something(e) }/>
    </div>
);
}

Question 6

import React , {useEffect , useRef } from 'react' ; 

function Example() {

 let inp = useRef() 
 useEffect(()=>{ 
   if (!inp && !inp.current) return 
   inp.current.focus() ; 
   return () => inp = null ;  
 });
 
 const handleSubmit = () => { 
    //...  
 }

 return ( 
    <form                                                        
    onSubmit={(e) => {                                       
      e.preventDefault();                                       
      handleSubmit(e);                               
        }}                                                        > 
        <input 
           name="fakename" 
           defaultValue="...." 
           ref={inp}
           type="text"
           style={{
             position :"absolute" , 
             opacity : 0  
           }}
         />
         <button type="submit"> 
            submit
         </button>
    </form>
 )
}

স্নিপেট প্রসারিত করুন

পপাসে কোড হেরসোমটাইমগুলি প্রবেশ করুন এটি কেবল একটি ফর্মকে বাঁধাই এবং ফর্মটিতে অনসামিটটি পাস করার কাজ করবে না কারণ ফর্মটির কোনও ইনপুট নাও থাকতে পারে। এই ক্ষেত্রে যদি আপনি ঘটনাটি দস্তাবেজের সাথে আবদ্ধ করে থাকেন তবে document.addEventListenerএটির সমস্যা সমাধানের জন্য এটি গণনার ক্ষেত্রে অ্যাপ্লিকেশনটির অন্য একটি অংশে সমস্যা হয়ে দাঁড়াবে আমাদের একটি ফর্ম আবৃত করা উচিত এবং সিএসএস দ্বারা লুকিয়ে থাকা একটি ইনপুট দেওয়া উচিত .. তারপরে আপনি সেই ইনপুটটিতে রেফ দিয়ে ফোকাস করেন এটি নিখুঁতভাবে কাজ করবে।

Question 7

আমি @ ব্যবহারকারী 1032613 এর উত্তর এবং এই উত্তরটি তৈরি করেছি এবং একটি "প্রেসে এন্টার ক্লিক করুন কোয়েরিস্ট্রিংয়ের সাথে ক্লিক করুন উপাদান" হুক তৈরি করেছি। উপভোগ করুন!

const { useEffect } = require("react");

const useEnterKeyListener = ({ querySelectorToExecuteClick }) => {
    useEffect(() => {
        //https://stackoverflow.com/a/59147255/828184
        const listener = (event) => {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                handlePressEnter();
            }
        };

        document.addEventListener("keydown", listener);

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

    const handlePressEnter = () => {
        //https://stackoverflow.com/a/54316368/828184
        const mouseClickEvents = ["mousedown", "click", "mouseup"];
        function simulateMouseClick(element) {
            mouseClickEvents.forEach((mouseEventType) =>
                element.dispatchEvent(
                    new MouseEvent(mouseEventType, {
                        view: window,
                        bubbles: true,
                        cancelable: true,
                        buttons: 1,
                    })
                )
            );
        }

        var element = document.querySelector(querySelectorToExecuteClick);
        simulateMouseClick(element);
    };
};

export default useEnterKeyListener;

আপনি এটি এভাবে ব্যবহার করেন:

useEnterKeyListener({
    querySelectorToExecuteClick: "#submitButton",
});

https://codesandbox.io/s/useenterkeylistener-fxyvl?file=/src/app.js:399-407