基本上就是标题所说的。当我提交表单时,我会检查登录是否成功,如果不成功,就会显示一条消息。但是当用户开始输入时,我希望这个消息消失。
我认为 isDirty
在表单提交后会被清除,但它仍然是脏的。我可以从 onSubmit
中调用 reset
,但这会清除表单的内容 - 这不是我想要的。
有什么好的想法吗?
基本上就是标题所说的。当我提交表单时,我会检查登录是否成功,如果不成功,就会显示一条消息。但是当用户开始输入时,我希望这个消息消失。
我认为 isDirty
在表单提交后会被清除,但它仍然是脏的。我可以从 onSubmit
中调用 reset
,但这会清除表单的内容 - 这不是我想要的。
有什么好的想法吗?
您可以向重置发送一个新的值集。由于您在提交处理程序中接收到一组值,因此可以通过以下方式连接两个功能:
const {reset, handleSubmit, formState} = useForm();
const {isDirty} = formState;
const handleFormSubmit = (values) =>
{
//This would be the call where you post your info
fetch('google.com')
.then(response => console.log('response', response))
.finally(() => reset(values));
}
注意上面示例中的reset(values)
,它将重置表单以使用尝试提交的值。因此,将isDirty
重新设为false。reset
还会更改 useFieldArray
字段的 id
,因此会导致这些组件重新挂载(只有某些用例会受到影响)。更多讨论请参见此处。下面的答案(reset({}, { keepValues: true });
)似乎没有这个问题。 - Garrett在useEffect()中重置将起作用,但是不应该使用useEffect()来处理此类事情。请参阅有关React 18和useEffect()运行两次的所有讨论。
只需在handleSubmit函数末尾调用
reset({}, { keepValues: true });
即可。如果您只想保留当前值,则无需提供所有值。
keepValues
但没有效果。 - TruMan1感谢Charlie-Hua发布的帖子,我们通过以下方法解决了这个问题: https://github.com/react-hook-form/react-hook-form/issues/3097
React.useEffect(() => {
if (isSubmitSuccessful) {
reset({}, { keepValues: true });
}
}, [isSubmitSuccessful, reset]);
isDirty
状态,而不干扰表单的值或默认值,一个例子可以是(明确说明):reset(undefined, {keepValues: true, keepDirty: false, keepDefaultValues: false});
使用React.useEffect()
钩子的示例:
我想保留提交的name
和filter
值,并且能够重置为原始的defaultValues
,同时重置isDirty
:
const { reset, formState: { isSubmitSuccessful } } = useForm({
defaultValues: {
filter: "",
category: "",
}
});
React.useEffect(() => {
if(isSubmitSuccessful) {
reset(undefined, {keepValues: true, keepDirty: false, keepDefaultValues: false});
}
}, [isSubmitSuccessful, reset]);
useForm文档在props下解释了reset()
的不同选项。它们也可以在项目的TypeScript声明中引用。
推断类型:
const reset: (values?: any, keepStateOptions?: Partial<{
keepDirtyValues: boolean;
keepErrors: boolean;
keepDirty: boolean;
keepValues: boolean;
keepDefaultValues: boolean;
keepIsSubmitted: boolean;
keepTouched: boolean;
keepIsValid: boolean;
keepSubmitCount: boolean;
}> | undefined) => void