React中输入框为空时如何恢复按钮禁用状态？

问题根源 #

1. 缺少必填校验规则：未给username字段添加required规则，输入框为空时minLength和pattern规则不会触发校验，导致isValid始终为true。
2. 默认校验模式限制：react-hook-form默认仅在表单提交时触发校验，输入内容变化或清空时不会实时更新isValid状态。
3. isDirty状态特性：表单一旦被修改，isDirty就会保持true，即使删除所有内容也不会重置，因此!isDirty无法让按钮重新禁用。

修复步骤 #

1. 开启实时校验模式

修改useForm配置，设置mode: 'onChange'让输入变化时实时触发校验：

const { control, formState: { isValid, errors } } = useForm({
  mode: 'onChange'
});

2. 添加必填校验规则

给username的校验规则加上required，确保空值时校验失败：

<Controller
  name="username"
  control={control}
  rules={{
    required: {
      value: true,
      message: '用户名不能为空'
    },
    minLength: {
      value: 2,
      message: '用户名长度不能少于2位'
    },
    pattern: {
      value: /^([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/,
      message: '用户名格式不正确'
    },
  }}
  render={({ field: { ref, ...field } }) => (
    <SecondaryInput
      name="username"
      errors={errors}
      innerRef={ref}
      {...field}
    />
  )}
/>

3. 简化按钮禁用逻辑

直接用!isValid控制按钮状态，实时校验后空值或不符合规则时isValid会自动变为false：

<PrimaryButton
  disabled={!isValid}
  type="submit"
>
  Test Submit
</PrimaryButton>

效果验证 #

• 初始状态：输入框为空，触发required校验，isValid为false，按钮禁用。
• 输入合规内容：isValid变为true，按钮启用。
• 删除所有内容：再次触发required校验，isValid变为false，按钮重新禁用。

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