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

Question

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

एनबी: कोई 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> 

Answer 1

<button type="submit" करने के लिए

बदलें <button type="button"। onClick हटाएं। इसके बजाय <form className="commentForm" onSubmit={this.onCommentSubmit}> करें। इसे बटन पर क्लिक करके और रिटर्न कुंजी दबाकर पकड़ना चाहिए।

संपादित करें: जैसा कि जेम्स टिप्पणियों में कहते हैं, आप action यूआरएल लोड करने की कोशिश कर रहे पृष्ठ को रोकने के लिए कॉलबैक में event.preventDefault() पर भी कॉल कर सकते हैं। निर्माता में onSubmit={(e) => this.onCommentSubmit(e)} या this.onCommentSubmit = this.onCommentSubmit.bind(this) या यहाँ तक कि E7 के तीर तरीकों onSubmit = (e) => {...}:

आप कॉलबैक में this उपयोग करने के लिए आप तीर कार्यों इस्तेमाल कर सकते हैं चाहते हैं।

Answer 2

उपयोग 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"> 
     <div> 
      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> 
    ); 
    }