时间戳

首页 > 解决方案 > 通过在反应表单中按 enter 防止用户触发 onSubmit 处理程序

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

问题描述

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

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

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

标签： javascripthtmlreactjsforms

解决方案

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

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

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

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

推荐阅读