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

Question

找不到解决方案。
我正在使用react-hook-form并且我想在 forms 为空并启用时禁用提交按钮，只要所有 forms 至少有一些东西写入其中。
我将如何使用react-hook-form做到这一点？

Answer 1

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


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

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 模式解释：

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

Answer 3

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

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" />

Answer 4

关闭，但我认为逻辑与其他评论略有不同。 关键是使用&&运算符。 归功于 Formik 库的示例。

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