Я использую react-hook-form
, и мне нужно создать форму переключателей, которая отправляется при выборе параметра. это код
const Form0 = () => {
const { register, handleSubmit } = useForm();
const submitFunction = (data) => {
console.info("submitted:", data);
};
return (
<form onSubmit = {handleSubmit(submitFunction)}>
<label>
<input type = "radio" value = "foo" {...register("radio-button")} />
foo
</label>
<label>
<input type = "radio" value = "bar" {...register("radio-button")} />
bar
</label>
<label>
<input type = "radio" value = "foobar" {...register("radio-button")} />
foobar
</label>
</form>
);
};
Я пытался добавить onClick = {() => handleSubmit(submitFunction)}
к каждому ярлыку, но не сработало. Также я попытался изменить все типы ввода на type = "submit"
, но при нажатии на ввод всегда отправляйте значение первого ввода.
Я создал песочницу https://codesandbox.io/s/react-hook-form-radio-p4p9o9
заранее спасибо
Одним из решений было бы добавить ссылку в тег формы и использовать ее для отправки события отправки с помощью переключателей.
Добавьте ссылку:
const formRef = React.useRef(null);
<form ref = {formRef} ...
Добавьте onClick к своим переключателям:
onClick = {handleRadioButtonClick}
и отправьте событие отправки:
const handleRadioButtonClick = () => {
formRef.current.dispatchEvent(new Event("submit", { cancelable: true }));
};
Обновлено:
Для примера с песочницей вы можете использовать watch
и подписаться на такие изменения, как:
useEffect(() => {
const subscription = watch(handleSubmit(submitFunction));
return () => subscription.unsubscribe();
}, [handleSubmit, watch]);
тогда песочница не помешала бы
Я просто добавил песочницу с исходным кодом
Я пытался сделать это, но не работал. Он не запускает функцию onSubmit