React Hook Form：仅当Name和State为空时禁用提交按钮

要实现仅当name和state都为空时禁用提交按钮，只需借助React Hook Form的watch方法实时监听这两个字段的值，再根据判断结果控制按钮的disabled属性即可。具体修改步骤如下：

1. 解构获取watch方法：从useForm返回值中取出watch，用于实时跟踪表单字段的变化。
2. 监听目标字段：用watch监听name和state两个字段，获取它们的实时值。
3. 计算禁用条件：当name和state同时为空字符串时，设置按钮禁用；其他情况（只要其中一个有值，或者两个都有值）都允许提交。
4. 绑定禁用属性：把计算出的禁用状态绑定到提交按钮的disabled属性上。

修改后的完整代码：

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  name: string;
  state: string;
  email: string;
};

export default function App() {
  const { register, handleSubmit, watch } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
  
  // 实时监听name和state字段的值
  const { name, state } = watch(['name', 'state']);
  // 计算按钮禁用条件：仅当name和state都为空时禁用（trim忽略空白字符）
  const isSubmitDisabled = !name.trim() && !state.trim();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      <input {...register("state")} placeholder="State" />
      <input type="email" {...register("email")} placeholder="Email" />

      <input type="submit" disabled={isSubmitDisabled} />
    </form>
  );
}

补充说明 #

• 代码中用trim()忽略字段中的空白字符，避免用户只输入空格就被判定为“已填写”的情况，如果不需要这个逻辑，可以直接去掉trim()。
• watch方法会在监听的字段值变化时自动触发组件重渲染，确保按钮状态能实时同步字段输入情况。

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