Как зарегистрировать radio button(material-ui) в React Hook Form

Question

Весь вопрос в описании. Если с текстовым input всё просто ({...register("name")}), то как это сделать с radio button понять не могу. Есть предположение, что нужно использовать useState и onChange

import React from "react";
import {Container, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography} from "@mui/material";
import {Input} from "./component/Form/Input";
import {PrimaryButton} from "./component/Form/PrimatyButton";
import {useForm} from "react-hook-form";

function App() {
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const onSubmit = data => console.log(data);

    return (
        <>
            <Container className="conStyle">
                <Typography variant="h5" component="h1">
                    Пример формы оформления заказа
                </Typography>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <Input
                        {...register("firstName")}
                        id="firstName"
                        type="text"
                        label="Имя"
                        name="firstName"
                    />
                    <Input
                        {...register("phoneNumber")}
                        id="phoneNumber"
                        type="tel"
                        label="Номер телефона"
                        name="phoneNumber"
                    />

                    <FormControl>
                        <FormLabel id="demo-radio-buttons-group-label">Выбирите способ доставки</FormLabel>
                        <RadioGroup
                            aria-labelledby="demo-radio-buttons-group-label"
                            defaultValue="delivery"
                            name="delivery-group"

                        >
                            <FormControlLabel value="delivery" control={<Radio  />} label="Доставка"/>
                            <FormControlLabel value="order" control={<Radio />} label="Самовывоз" />
                            <FormControlLabel value="orderInPlace" control={<Radio />} label="Заказать внутри заведения" />
                        </RadioGroup>
                    </FormControl>

                    <PrimaryButton>Оформить заказ</PrimaryButton>
                </form>
            </Container>
        </>
    );
}

export default App;

Answer 1

Накидал примерчик на коленке.

import { Controller, useForm } from "react-hook-form";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import FormControlLabel from "@mui/material/FormControlLabel";
import "./styles.css";

export default function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      selectedRadio: ""
    }
  });

  const onSubmit = handleSubmit((submittedValues) => {
    console.log("отправлено", submittedValues);
  });

  return (
    <div className="App">
      <Box component="form" onSubmit={onSubmit}>
        <Controller
          control={control}
          name="selectedRadio"
          render={({ field }) => (
            <RadioGroup
              aria-labelledby="demo-radio-buttons-group-label"
              defaultValue="female"
              name="radio-buttons-group"
              {...field}
            >
              <FormControlLabel
                value="female"
                control={<Radio />}
                label="Женщина"
              />
              <FormControlLabel
                value="male"
                control={<Radio />}
                label="Мужчина"
              />
              <FormControlLabel
                value="other"
                control={<Radio />}
                label="Другое"
              />
            </RadioGroup>
          )}
        />

        <Button type="submit">Создать</Button>
      </Box>
    </div>
  );
}

Codesandbox

БЛОГ НА HUSL

Как зарегистрировать radio button(material-ui) в React Hook Form

Ответы (1 шт):