反应钩子形式的 getValues() 返回未定义
react hook form's getValues() returning undefined
问题:
- 如何在不对每个输入使用
setValue()
的情况下使用 react-hook-form 的控制器访问表单的值?
问题:
我正在创建自己的一组可重用组件,并尝试使用 React Hook Form 的 Controller 来管理状态等。我在访问输入值时遇到问题并不断获得 undefined
。但是,如果我首先使用 setValue()
.
它将起作用
return (
<form onSubmit={onSubmit}>
<WrapperInput
name="controllerInput"
label="This input uses Controller:"
type="text"
rules={{ required: "You must enter something" }}
defaultValue=""
/>
<button
type="button"
onClick={() => {
// getValues() works if use following setValue()
const testSetVal = setValue("controllerInput", "Hopper", {
shouldValidate: true,
shouldDirty: true
});
// testGetVal returns undefined if setValue() is removed
const testGetVal = getValues("controllerInput");
console.log(testGetVal);
}}
>
GET VALUES
</button>
<button type="submit">Submit</button>
</form>
);
更多信息:
我不明白为什么 getValues()
返回 undefined
。当我在 React 开发工具中查看 control
对象时,我可以看到该值已保存。我也收到 undefined
表单提交。
我这里的一般方法是使用原子 Input.tsx
组件来处理输入样式。然后我使用 WrapperInput.tsx
使用 react-hook-fom 将其转换为受控输入。
改为将 control
提升到父级,并将其作为 prop 传递给可重用组件。
// RegistrationForm.tsx
...
const {
setValue,
getValues,
handleSubmit,
formState: { errors },
control,
} = useForm();
...
return (
...
<WrapperInput
control={control} // pass it here
name="controllerInput"
label="This input uses Controller:"
type="text"
rules={{ required: "You must enter something" }}
defaultValue=""
/>
)
// WrapperInput.tsx
const WrapperInput: FC<InputProps> = ({
name,
rules,
label,
onChange,
control, /* use control from parent instead */
defaultValue,
...props
}) => {
return (
<div>
<Controller
control={control}
name={name}
defaultValue={defaultValue}
render={({ field }) => <Input label={label} {...field} />}
/>
</div>
);
};
问题:
- 如何在不对每个输入使用
setValue()
的情况下使用 react-hook-form 的控制器访问表单的值?
问题:
我正在创建自己的一组可重用组件,并尝试使用 React Hook Form 的 Controller 来管理状态等。我在访问输入值时遇到问题并不断获得 undefined
。但是,如果我首先使用 setValue()
.
return (
<form onSubmit={onSubmit}>
<WrapperInput
name="controllerInput"
label="This input uses Controller:"
type="text"
rules={{ required: "You must enter something" }}
defaultValue=""
/>
<button
type="button"
onClick={() => {
// getValues() works if use following setValue()
const testSetVal = setValue("controllerInput", "Hopper", {
shouldValidate: true,
shouldDirty: true
});
// testGetVal returns undefined if setValue() is removed
const testGetVal = getValues("controllerInput");
console.log(testGetVal);
}}
>
GET VALUES
</button>
<button type="submit">Submit</button>
</form>
);
更多信息:
我不明白为什么 getValues()
返回 undefined
。当我在 React 开发工具中查看 control
对象时,我可以看到该值已保存。我也收到 undefined
表单提交。
我这里的一般方法是使用原子 Input.tsx
组件来处理输入样式。然后我使用 WrapperInput.tsx
使用 react-hook-fom 将其转换为受控输入。
改为将 control
提升到父级,并将其作为 prop 传递给可重用组件。
// RegistrationForm.tsx
...
const {
setValue,
getValues,
handleSubmit,
formState: { errors },
control,
} = useForm();
...
return (
...
<WrapperInput
control={control} // pass it here
name="controllerInput"
label="This input uses Controller:"
type="text"
rules={{ required: "You must enter something" }}
defaultValue=""
/>
)
// WrapperInput.tsx
const WrapperInput: FC<InputProps> = ({
name,
rules,
label,
onChange,
control, /* use control from parent instead */
defaultValue,
...props
}) => {
return (
<div>
<Controller
control={control}
name={name}
defaultValue={defaultValue}
render={({ field }) => <Input label={label} {...field} />}
/>
</div>
);
};