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

Question

找不到解决办法。
我正在使用react-hook-form并且我想在表单为空时禁用提交按钮，并且只要所有表单都至少写入了一些内容就可以启用。
我将如何使用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 模式说明：

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