Блог

Главная - Вопросы по программированию - проверка пользовательского интерфейса formik для кнопок material ui react radion

проверка пользовательского интерфейса formik для кнопок material ui react radion

#reactjs #material-ui #radio-button #formik #radio-group

#reactjs #материал-пользовательский интерфейс #переключатель #formik #радиогруппа

Вопрос:

Я пытаюсь обернуть formik вокруг компонентов формы material ui react. Он хорошо работает с компонентом TextField. Пожалуйста, найдите код ниже:

 <TextField
              id="firstName"
              name="firstName"
              label="First Name"
              variant="outlined"
              autoComplete="off"
              value={formik.values.firstName}
              onChange={formik.handleChange}
              error={
                formik.touched.firstName amp;amp; Boolean(formik.errors.firstName)
              }
              helperText={formik.touched.firstName amp;amp; formik.errors.firstName}
              className={classes.controls}
            />

Но как мне обернуть его вокруг переключателей:

 <FormControl component="fieldset" className={classes.controls}>
              <FormLabel component="legend">Gender</FormLabel>
              <RadioGroup aria-label="gender" name="gender">
                <FormControlLabel
                  value="male"
                  control={<Radio />}
                  label="Male"
                />
                <FormControlLabel
                  value="female"
                  control={<Radio />}
                  label="Female"
                />
              </RadioGroup>
            </FormControl>

Не удалось найти достаточно документации для исправления этого бита. Может кто-нибудь, пожалуйста, помогите.

Спасибо

Комментарии:

1. Можете ли вы предоставить codesandbox или sth вашего кода? Между тем это может помочь: ваш компонент управления может получить onChange атрибут. <FormControlLabel control={<Checkbox checked={apple} onChange={handleChange} name="apple" />} label="Apple" />

Ответ №1:

Я сделал следующее, чтобы реализовать кнопки радиогруппы:

 import { FormControlLabel, Radio } from "@material-ui/core";
import * as yup from "yup";

export function RadioButtonGroup(props) {
  const [field] = useField({
    name: props.name,
    type: "radio",
    value: props.value,
  });
  return (
    <FormControlLabel
      control={<Radio {...props} {...field} />}
      label={props.label}
    />
  );
}

Добавьте следующий код внутри формы:

       <RadioButtonGroup name="gender" value="male" label="Male" />
      <RadioButtonGroup name="gender" value="female" label="Female" />

Для проверки:

 const validationSchema = yup.object({
  gender: yup.string().required("Gender is required"),
});