如何使用react.js中的Enter鍵提交表單？

這是我的表單和onClick方法。我想在按下鍵盤上的Enter按鈕時執行此方法。怎麼樣？如何使用react.js中的Enter鍵提交表單？

N.B：沒有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>

來源

2015-10-19 Jason Bourne

變化<button type="button"到<button type="submit"。刪除onClick。取而代之的是<form className="commentForm" onSubmit={this.onCommentSubmit}>。這應該趕上點擊按鈕並按回車鍵。

編輯：正如詹姆斯在評論中說的，你也可以在回調中調用event.preventDefault()來停止試圖加載action網址的頁面。

如果你想使用this回調，您可以使用箭頭功能：在構造函數中onSubmit={(e) => this.onCommentSubmit(e)}或this.onCommentSubmit = this.onCommentSubmit.bind(this)甚至E7的箭頭方法onSubmit = (e) => {...}。

來源

2015-10-19 11:12:52

爲什麼的onsubmit = {} this.onCommentSubmit> @Dominic –

@JasonBourne你可以給回調任何你想要的名字，我只是一直給事件回調的名稱，如？ onSomethingClick，onMouseMove，onFormKeyPress等，而不是根據它應該在內部做什麼來命名方法，因爲有時會改變或者在另一種方法中（更多可測試） –

我遵循了你的指示，但是，在鼠標單擊時它是不工作。雖然它在爲Enter鍵工作，但當我用Tabs鍵將我的選擇懸停在按鈕上時它正在工作。你能提出一個更好的方法嗎？ @Dominic –

使用事件做到這一點：

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

來源

2018-01-30 15:52:07 Andrew

如何使用react.js中的Enter鍵提交表單？

回答

相關問題