通过在反应表单中按 enter 防止用户触发 onSubmit 处理程序答案

【问题标题】：Prevent users from triggering the onSubmit handler by pressing enter in a react form通过在反应表单中按 enter 防止用户触发 onSubmit 处理程序
【发布时间】：2021-03-02 23:28:19
【问题描述】：

我有一个带有 onSubmit 处理程序的简单反应表单。在处理程序内部发出一个发布请求。是这样的

const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('...', method post, body ... etc)
    setStatus(await response.text())
}

我遇到的问题是我的功能基本上仍然由回车按钮触发，因此它发出了一个发布请求。我希望这仅在有人实际单击按钮时发生。我想也许我可以通过过滤事件 keyCode 来做到这一点，但我找不到它。

【问题讨论】：

“但我找不到” - 你确定你真的是搜索过吗？ stackoverflow.com/questions/895171/…
当然，但那里的答案都没有奏效。大多数是基于 jquery 的解决方案。
那又如何，原则的变化很小。

标签： javascript html reactjs forms

【解决方案1】：

你必须使用onKeyPress 道具，例如：

const handleKeyPress = (event)  = {
    if (event.which === 13) {
      event.preventDefault();
    }
},

return (
    <form onKeyPress={handleKeyPress}...
)

注意：提交事件是在你使用onSubmit的时候执行的（当onSubmit也执行的时候），所以到时候阻止默认动作已经来不及了。

【讨论】：

谢谢兄弟！这似乎有效，我现在有
。
@Blackfrwhite Noice!，在onKeyPress旁边使用onSubmit没有问题。