React.js में Enter कुंजी का उपयोग करके फ़ॉर्म कैसे सबमिट करें?

Question 1

यहाँ मेरा रूप और ऑनक्लिक विधि है। जब कीबोर्ड का Enter बटन दबाया जाता है तो मैं इस विधि को निष्पादित करना चाहता हूं। कैसे ?

एनबी: कोई भी प्रशंसा नहीं है।

 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

यदि आप "Enter" कुंजी सुनना चाहते हैं तो आप इसे कैसे करते हैं। एक onKeydown प्रॉप है जिसे आप उपयोग कर सकते हैं और आप इसके बारे में रिएक्शन डॉक में पढ़ सकते हैं

और यहाँ एक codeSandbox है

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