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

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

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

isDirty提交后没有设置为false所以如果你想清除它，你需要调用reset:

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

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

react-hook-form: Check for unsaved changes

reactjs

react-native

react-hook-form