如何使用 react-hook-form 条件性地禁用提交按钮？

Question

找不到解决方案。
我正在使用 react-hook-form 并且想要在表单为空时禁用提交按钮，在所有表单至少填写了一些内容后启用该按钮。
如何使用 react-hook-form 实现这一点？

- Mr.Joony

Answer 1

const { 
    register, 
    handleSubmit, 
    formState: { isSubmitting, isDirty, isValid } // here
  } = useForm({ mode: "onChange" })


<button
  type="submit"
  disabled={!isDirty || !isValid} // here
>
  Comment
</button>

- Joshua Galit

---

如果在嵌套组件中使用，您可以直接从 const { isDirty, isValid } = useFormState(); 获取表单状态。 - Titenis

Answer 2

到目前为止，我发现使用formState并将模式设置为onChange是最好的解决方案。

 const { register, handleSubmit, formState } = useForm({
    mode: "onChange"
  });

点击提交按钮：

<button disabled={!formState.isValid}/>

基于这个问题：https://github.com/react-hook-form/react-hook-form/issues/77

文档中关于onChange模式的解释：

每次输入时，验证将在更改事件上触发并导致多次重新渲染。警告：这经常对性能有重大影响。

- Guilherme Akira Matsumoto

Answer 3

您可以使用 formState => isDirty，这意味着表单已被修改。

以下是关于 formState 的工作示例:

https://react-hook-form.com/api#formState

下面是一个可用的示例代码，使用了 formState:

https://codesandbox.io/s/react-hook-form-v6-formstate-ht098?file=/src/index.jsx:423-432

<input disable={formState.isDirty} type="submit" />

- Bill

---

如果我想在成功提交后再次禁用提交按钮怎么办？我在文档中没有看到这种情况的提及。感谢react-hook-form，它是一个很棒的库。 - vanduc1102

使用第三方库时，似乎无法与控制器配合使用。 - undefined

Answer 4

接近了，但我认为逻辑与其他评论略有不同。关键是使用 && 运算符。感谢使用 Formik 库的 示例。

const { formState: { errors, isDirty, isValid } } = useForm()
///...
<button type="submit" disabled={!isDirty && !isValid}>
Continue
</button>

- rottitime

---

所以，当表单是脏的，但无效（false && true）时，它将不再被禁用吗？我认为这对于大多数用例来说都不是一个合适的答案。 - Almog Cohen

我认为应该是||。 - undefined