Блог

Я учусь программировать в React и Next.js и когда дело доходит до отправки данных в формах, с помощью react-hook-форм действительно легко, но когда дело доходит до переключателей, я немного борюсь. У меня в приложении есть шаг, на котором мне нужно выбрать один вариант из 3, и для этого я использую переключатели.

Код, который я использую здесь, возвращает метод оплаты: PayPal, независимо от того, какой вариант я выбираю из всех переключателей, я всегда его получаю.

 /** @format */  import React, { useContext, useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import Cookies from 'js-cookie'; import { Store } from '../utils/Store'; import Layout from '../components/Layout'; import Main from '../components/ui/Main/Main'; import HeadlineThree from '../components/ui/Type/HeadlineThree/HeadlineThree'; import { Controller, useForm } from 'react-hook-form'; import Section from '../components/ui/Section/Section'; import Button from '../components/ui/Button/Button';  export default function Payment() {  // iniciamos el formulario  const {  handleSubmit,  control,  setValue,  getValues,  formState: { errors },  } = useForm();   // levantamos el router para redirigir  const router = useRouter();   // useState de paymentMethods  const [paymentMethod, setPaymentMethod] = useState('');   // alcanzamos el Store  const { state, dispatch } = useContext(Store);   // pediremos los states  const {  cart: { shippingAddress },  } = state;   // comprobaremos si tiene address y si la tiene, el método de pago  useEffect(() =gt; {  if (!shippingAddress.address) {  router.push('/shipping');  } else {  setPaymentMethod(Cookies.get('paymentMethod') || '');  }  }, []);  // handler del formulario  const submitHandler = data =gt; {  console.log(data);  if (!paymentMethod) {  console.log(data);  } else {  console.log('ahora no');  // dispatch({ type: 'SAVE_PAYMENT_METHOD', payload: paymentMethod });  // Cookies.set('paymentMethod', paymentMethod);  // router.push('/placeorder');  }  };   return (  lt;Layout title='Payment Method'gt;  lt;Main css='padding--32'gt;  lt;form  onSubmit={handleSubmit(submitHandler)}  className='display--grid gap--8'  gt;  lt;HeadlineThreegt;Payment Methodslt;/HeadlineThreegt;  lt;Controller  name='paymentMethod'  control={control}  defaultValue='PayPal'  render={({ field }) =gt; (  lt;labelgt;  lt;input name='paymentMethod' type='radio' {...field} /gt;  lt;spangt;PayPallt;/spangt;  lt;/labelgt;  )}  gt;lt;/Controllergt;  lt;Controller  name='paymentMethod'  control={control}  defaultValue='Stripeaaa'  render={({ field }) =gt; (  lt;labelgt;  lt;input  defaultChecked='true'  name='paymentMethod'  type='radio'  {...field}  /gt;  lt;spangt;Stripelt;/spangt;  lt;/labelgt;  )}  gt;lt;/Controllergt;  lt;Controller  name='paymentMethod'  control={control}  defaultValue='Cash'  render={({ field }) =gt; (  lt;labelgt;  lt;input  name='paymentMethod'  type='radio'  value='Cash'  {...field}  /gt;  lt;spangt;Cashlt;/spangt;  lt;/labelgt;  )}  gt;lt;/Controllergt;  lt;Sectiongt;  lt;Button type='submit' kind='action'gt;  Continue  lt;/Buttongt;{' '}  lt;Button onClick={() =gt; router.push('/shipping')}gt;Backlt;/Buttongt;  lt;/Sectiongt;  lt;/formgt;  lt;/Maingt;  lt;/Layoutgt;  ); }   

Когда я выполняю это, я получаю только: Объект {Метод оплаты: «PayPal»}, и я подозреваю, что это потому, что он первый в группе. Может быть, мне чего-то не хватает, чтобы получить выбранное значение, а не первое в группе.

Вам просто нужно сделать следующее, чтобы зарегистрировать радио входного типа. Контроллер в вашем случае не нужен:

 const Component = () =gt; {  const { register, handleSubmit } = useForm();   return (  lt;form onSubmit={handleSubmit(data =gt; console.log(data))}gt;  lt;input type="radio" {...register('paymentMethod')} value="PayPal" /gt;  lt;input type="radio" {...register('paymentMethod')} value="Stripeaaa" /gt;  lt;input type="radio" {...register('paymentMethod')} value="Cash" /gt;   lt;buttongt;Submitlt;/buttongt;  lt;/formgt;  ); }