Отправить при нажатии радиовхода в форме реакции-крюка

Я использую 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

заранее спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Одним из решений было бы добавить ссылку в тег формы и использовать ее для отправки события отправки с помощью переключателей.

Добавьте ссылку:

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

Fernando 07.02.2023 21:51

тогда песочница не помешала бы

tpliakas 08.02.2023 11:50

Я просто добавил песочницу с исходным кодом

Fernando 08.02.2023 16:24

Другие вопросы по теме