React表单onSubmit每次按键触发，如何实现回车提交表单？

我来帮你梳理下问题所在，其实是两个小细节导致的：

1. Register按钮的函数调用方式错误 #

你写的onClick={postRegister({username, password})}是立即执行了postRegister函数，而不是把它作为点击回调传递。每次组件重新渲染（比如输入框输入内容改变状态时），这个函数都会被调用一次，这就是你看到“每次按键都触发提交”的核心原因。

正确的写法应该用箭头函数包裹，让它只有在点击时才执行：

<Button onClick={() => postRegister({username, password})}>Register</Button>

2. Sign In按钮需要设置type="submit" #

你的Sign In按钮目前没有指定type属性，默认会是type="button"，这会导致表单无法识别它为提交按钮——浏览器默认的回车提交行为，是触发表单内第一个type="submit"的按钮对应的逻辑。

把Sign In按钮改成type="submit"，这样点击按钮或者在输入框按回车，都会触发表单的onSubmit事件，而你在postLogin里的e.preventDefault()也能正常阻止浏览器默认的表单跳转行为：

<Button type="submit">Sign In</Button>

3. 移除多余的onKeyPress监听 #

你之前给密码框加的onKeyPress完全没必要，表单的onSubmit已经天然支持回车提交的逻辑，而且你之前的写法里postLogin()没有传递事件对象，执行时会报错（因为e是undefined），直接删掉这个监听就好。

修改后的完整表单代码 #

<Form onSubmit={postLogin}>
  <Input 
    type="text" 
    value={username} 
    placeholder="username" 
    onChange={e => setUserName(e.target.value)} 
  />
  <Input 
    type="password" 
    value={password} 
    placeholder="password" 
    onChange={e => setPassword(e.target.value)} 
  />
  <Button type="submit">Sign In</Button>
  <Button onClick={() => postRegister({username, password})}>Register</Button>
</Form>

这样修改后，就不会出现每次按键触发提交的情况，同时在输入框按回车会正常触发postLogin函数，实现你想要的功能。

内容的提问来源于stack exchange，提问作者Jim