Question

我正在尝试将 formik 包裹在材料 ui 反应表单组件周围。它适用于 TextField 组件。请找到以下代码：

<TextField
              id="firstName"
              name="firstName"
              label="First Name"
              variant="outlined"
              autoComplete="off"
              value={formik.values.firstName}
              onChange={formik.handleChange}
              error={
                formik.touched.firstName && Boolean(formik.errors.firstName)
              }
              helperText={formik.touched.firstName && 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>

找不到足够的文档来修复该问题。任何人都可以帮忙。

谢谢

Answer 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"),
});

材料 ui 反应单选按钮的 formik ui 验证

1 个答案: