如何在Formik+Material UI表单中替换文本输入为单选组？

下面是完整的可运行示例，直接替换你原来的“Skill Level”文本输入框即可，同时集成了Formik的表单验证：

import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Button, TextField } from '@mui/material';

const SkillLevelForm = () => {
  // 表单验证规则
  const validationSchema = Yup.object({
    name: Yup.string().required('必填项'),
    skillLevel: Yup.string().required('请选择技能等级')
  });

  // 初始表单值
  const initialValues = {
    name: '',
    skillLevel: ''
  };

  // 提交处理逻辑
  const onSubmit = (values) => {
    console.log('提交的表单数据:', values);
    // 替换为你的实际提交逻辑
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {({ errors, touched, handleChange, values }) => (
        <Form>
          {/* 原有姓名输入框示例 */}
          <TextField
            label="姓名"
            name="name"
            value={values.name}
            onChange={handleChange}
            error={touched.name && Boolean(errors.name)}
            helperText={touched.name && errors.name}
            fullWidth
            margin="normal"
          />

          {/* 替换文本框的技能等级单选组 */}
          <FormControl component="fieldset" margin="normal" error={touched.skillLevel && Boolean(errors.skillLevel)}>
            <FormLabel component="legend">Skill Level</FormLabel>
            <RadioGroup
              name="skillLevel"
              value={values.skillLevel}
              onChange={handleChange}
              row // 可选：设为true实现横向排列
            >
              <FormControlLabel value="beginner" control={<Radio />} label="Beginner" />
              <FormControlLabel value="intermediate" control={<Radio />} label="Intermediate" />
              <FormControlLabel value="advanced" control={<Radio />} label="Advanced" />
            </RadioGroup>
            {/* 错误提示文本 */}
            {touched.skillLevel && errors.skillLevel && (
              <span style={{ color: '#d32f2f', fontSize: '0.75rem', marginTop: '4px', display: 'block' }}>
                {errors.skillLevel}
              </span>
            )}
          </FormControl>

          <Button type="submit" variant="contained" color="primary" style={{ marginTop: '16px' }}>
            提交
          </Button>
        </Form>
      )}
    </Formik>
  );
};

export default SkillLevelForm;

关键要点说明 #

• Formik与MUI绑定：RadioGroup的name属性必须和Formik初始值中的skillLevel字段完全一致，Formik的handleChange可以直接绑定到RadioGroup的onChange事件，选中的单选框value会自动同步到Formik的表单状态。
• 验证集成：通过errors和touched状态判断是否显示错误，将error属性传给外层的FormControl来触发MUI的错误样式，同时手动添加错误提示文本（RadioGroup本身不支持helperText属性）。
• 切换为性别选项：如果需要替换成男/女选项，只需要修改RadioGroup内的选项：

  <FormControlLabel value="male" control={<Radio />} label="男" />
  <FormControlLabel value="female" control={<Radio />} label="女" />
  

• 排列方式调整：RadioGroup的row属性设为true时，选项横向排列；默认false为纵向排列，按需选择。

依赖检查 #

确保你的项目已安装以下依赖：

npm install formik yup @mui/material @emotion/react @emotion/styled

内容的提问来源于stack exchange，提问作者Hussein Al-Obaidi