我有一些可清除的选择,我想将 state 中的 applet
字段重置为空数组。
const defaultFormValues = { device: { ...initialDevice }, applets: [] };
const { control, getValues, setValue, reset, handleSubmit } = useForm<CreateDeviceFormData>({
mode: "all",
reValidateMode: "onChange",
defaultValues: defaultFormValues,
resolver: yupResolver(validationSchema),
});
const onChangeHandler = React.useCallback(
(value: Experience | null) => {
if (value) {
setValue("applets", getApplets(value));
} else {
setValue("applets", []);
// reset(defaultFormValues);
}
setValue("device.experience_id", value ? value.id : undefined);
},
[templateSelector, setValue],
);
console.log("current data", getValues(), control);
return (
<>
<SomeAutocompleteComponent control={control} onChange={onChangeHandler} />
<SelectAppletsComponent control={control} />
</>
);
export const SelectAppletsComponent = ({ control, onChange }) => {
const applets = useWatch({ control, name: "applets" }) as Applet[];
const device = useWatch({ control, name: "device" }) as Device;
if (!applets.length) {
return null;
}
return (
<SpanWrapper className="p-col-8">
{applets.map((applet) => (
<LabelRadio
key={applet.id}
inputId={applet.applet_type}
value={applet.applet_type}
label={applet.name}
checked={device.applet_type === applet.applet_type}
onChange={onChange}
/>
))}
</SpanWrapper>
);
};
问题是使用 setValue("applets", []);
清除 UI 上的选择由于某种原因不起作用,我不明白为什么,以及如何在没有reset
方法,它重置整个状态,而不仅仅是我理解的单个属性
最佳答案
如果您想将字段用作 RHF 的表单状态,则应始终注册字段。
React.useEffect(() => {
register("applets");
}, [register]);
这解决了一个问题。
更新:
还有一个新方法 resetField
可用
关于javascript - React hook 表单方法 - setValue - 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68757532/