React Hook Form v7输入表单字段即触发提交请求该如何解决

问题根因 #

你将表单提交逻辑绑定到了<form>标签的onClick事件上，只要点击表单范围内的任意区域（包括点击输入框激活输入的操作）都会触发提交逻辑，这和React Hook Form本身无关，属于事件绑定错误。

修复方法 #

仅需要修改<form>标签的事件绑定属性即可：
把原来的

<form
  onClick={handleSubmit(updateData)}
>

修改为

<form
  onSubmit={handleSubmit(updateData)}
>

修改后只有点击type="submit"的提交按钮时，才会触发提交逻辑。

可选优化建议 #

你当前的代码还有可以简化的空间：

• handleSubmit会自动将当前表单的所有值作为参数传递给提交函数，不需要手动调用getValues获取字段值，可以把updateData修改为如下写法：

const updateData = async (formData) => {
  const data = {
    firstName: formData.firstName,
    lastName: formData.lastName,
  };
  // 后续请求逻辑保持不变
}

• 如果你使用React Hook Form接管表单状态，不需要给<IonInput>额外绑定value属性，register已经内置了表单值的更新逻辑，额外绑定自定义state反而可能导致值不同步的问题。

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