如何通过Formik获取单选框值并传递至API？是否推荐使用枚举？

非常推荐用枚举来处理单选框的选项值，理由如下：

• 类型安全：如果是TypeScript项目，枚举能在编译阶段限制可选值，避免传入无效字符串（比如拼写错误的"wen"），提前发现问题。
• 可读性更强：代码里写ServiceTypeEnum.Went比直接写字符串"went"更直观，其他开发者一眼就能理解这个值的含义。
• 维护成本更低：如果后续API要求的参数值需要修改（比如把"went"改成"one_way"），只需要修改枚举的定义，不用在代码中逐个替换字符串，减少出错风险。
• 前后端一致性：如果后端也用相同的枚举定义，能保证前后端传递的参数值完全统一，避免因值不匹配导致的接口报错。

结合Formik的完整实现示例 #

首先定义枚举：

enum ServiceTypeEnum {
  Went = "went",
  Return = "return",
  WentReturn = "went_return"
}

然后将单选框与Formik绑定，实现值的同步和提交：

import { Formik, Form } from 'formik';
import { Grid, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material';

const ServiceForm = () => {
  const handleSubmit = (values) => {
    // 直接将Formik中的ServiceType值传递给API
    console.log('提交到API的值:', values.ServiceType);
    // 这里替换为你的API调用逻辑
    // fetch('/api/service-book', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(values)
    // });
  };

  return (
    <Formik
      initialValues={{ ServiceType: ServiceTypeEnum.Went }} // 设置默认选中项
      onSubmit={handleSubmit}
    >
      {({ values, handleChange }) => (
        <Form>
          <Grid item xs={12} sm={12} md={12}>
            <FormControl>
              <FormLabel>نوع سرویس:</FormLabel>
              <RadioGroup
                row
                name="ServiceType"
                value={values.ServiceType}
                onChange={handleChange}
              >
                <FormControlLabel
                  value={ServiceTypeEnum.Went}
                  control={<Radio />}
                  label="رفت"
                />
                <FormControlLabel
                  value={ServiceTypeEnum.Return}
                  control={<Radio />}
                  label="برگشت"
                />
                <FormControlLabel
                  value={ServiceTypeEnum.WentReturn}
                  control={<Radio />}
                  label="رفت و برگشت"
                />
              </RadioGroup>
            </FormControl>
          </Grid>
          <button type="submit" style={{ marginTop: 16 }}>ارسال درخواست</button>
        </Form>
      )}
    </Formik>
  );
};

export default ServiceForm;

关键说明 #

• 将RadioGroup的value绑定到Formik的values.ServiceType，onChange使用Formik的handleChange，这样选中的单选框值会自动同步到Formik的表单状态中。
• 提交表单时，values.ServiceType就是选中的枚举值，可以直接作为API请求参数传递，无需额外转换。

内容的提问来源于stack exchange，提问作者Mohammad Naghsh