如何使用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键提交表单？

回答

相关问题