based on react-hook-form, I have a custom component like this
<code> // inputCont.js
export const InputCont = ({ name, control, rules, ...others }) => {
const { field } = useController({ name, control, rules });
return (
<input id={name} {...field} {...others} />
);
};
</code>
<code> // inputCont.js
export const InputCont = ({ name, control, rules, ...others }) => {
const { field } = useController({ name, control, rules });
return (
<input id={name} {...field} {...others} />
);
};
</code>
// inputCont.js
export const InputCont = ({ name, control, rules, ...others }) => {
const { field } = useController({ name, control, rules });
return (
<input id={name} {...field} {...others} />
);
};
and then I use it in another file like this (I make it simpler)
<code> // main.js
const { control, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit()}>
<InputCont name="something" type="text"
control={control} autoComplete="off"/>
</form>
)
</code>
<code> // main.js
const { control, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit()}>
<InputCont name="something" type="text"
control={control} autoComplete="off"/>
</form>
)
</code>
// main.js
const { control, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit()}>
<InputCont name="something" type="text"
control={control} autoComplete="off"/>
</form>
)
now I need to have a onChange event handler inside main.js, I know I can add a custom onChange and pass it to the InputCont, but I wonder is this a best practice or there is easier way to use control or other result values of useForm