How to use react-hook-form's setValue etc
yyykkkyyy opened this issue · comments
Hi ! I'm learning from this wonderful repository.
I would like to ask that can I use react-hook-form's setValue etc.
In this repo's Form structure, how to use setValue etc from other components.
I think that this repo's form structure offers really reusable error handling and labeling.
On the other hand, I don't find appropriate way to set values dynamically on this form structure.
I envision a form that automatically populates the next form with values based on the input values.
For instance, I tried the code like below:
<Form<UserValues typeof schema>
...
>
{({ formState, control, setValue, watch }) => (
....
)}
</Form>
And below is my sample input field.
import { Controller, UseFormRegisterReturn } from 'react-hook-form';
import TextField from '@mui/material/TextField';
import { FieldWrapper, FieldWrapperPassThroughProps } from './FieldWrapper';
type InputFieldProps = FieldWrapperPassThroughProps & {
type?: 'text' | 'email' | 'password';
onChange?: any;
defaultValue?: string;
control: any;
setValue?: any;
name: string;
};
export const InputField = (props: InputFieldProps) => {
const { type = 'text', label, onChange, defaultValue, control, setValue, name, error } = props;
return (
<FieldWrapper label={label} error={error}>
<Controller
name={name}
control={control}
defaultValue={defaultValue}
render={({ field, fieldState, formState }) => {
return (
<TextField
label={label}
type={type}
value={field.value}
ref={field.ref}
onChange={onChange}
/>
);
}}
/>
</FieldWrapper>
);
};
I use MUI for input components, so I use a control
variable and it is used for Controller
in the component.
I can get setValue
, watch
and something, but I don't understand how to use these variables.
I understand this is very general and not critical question.
I would really appreciate it if you could answer my question.
Thanks.