react-hook-form：检查未保存的更改

Question

我有一个预先填写的表格，由以下控制react-hook-form：

const {control, handleSubmit, formState, setValue, reset} = useForm<UserDetailsForm>({
  mode: 'onChange',
  defaultValues,
});
const {errors, isDirty, isValid} = formState;
...

提交按钮：

<Button
  variant="link"
  title="Save Changes"
  onPress={handleSubmit(handleProceed)}
  disabled={!isDirty || !isValid}
/>

返回时，我需要检查表单是否有未保存的更改，如果有则显示警报。

我该如何检查？我尝试检查formState变量，但它似乎不包含类似的内容。

Answer 1

您可以使用isDirtyflag 来查看用户是否修改了任何表单字段：

const { ..., formState } = useForm(...);
const { isDirty } = formState;

isDirtyfalse提交后未设置，因此如果您想清除它，您需要调用reset：

const onSubmit = (data) => {
  // ...
  // set isDirty to false unless you set keepDirty: true in the option argument
  reset({}, { keepValues: true, keepIsValid: true });
};