Formik结合MaterialUI的单选按钮组提交时无法正确取值如何解决

• MaterialUI的RadioGroup处于半受控状态，你仅配置了defaultValue和onChange，没有显式绑定Formik管理的状态值。Formik要求所有受控表单控件必须将value属性关联到formik.values下的对应字段，否则值变更不会同步到Formik的全局状态中，提交时自然取不到对应值。
• 单独绑定formik.handleChange只能接收值变更事件，但没有value属性的受控绑定，RadioGroup的选中状态和Formik状态无法双向同步。

1. 删除RadioGroup的defaultValue属性，改为绑定value={formik.values.packageType}
2. 可选补充onBlur={formik.handleBlur}，方便后续加字段校验时可以正常触发失焦校验
3. 如果需要默认选中某个选项，直接在initialValues的packageType字段设置对应默认值即可，不要在RadioGroup上单独设置默认值

修正后的代码示例：

const formik = useFormik({
  initialValues: {
    email: '',
    // 需要默认选中的话在这里设初始值，比如 packageType: "Basic Package"
    packageType: '',
  },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    sendRequestEmail(values);
  },
});

<FormControl component="fieldset">
  <RadioGroup
    aria-label="Package type"
    name="packageType"   
    value={formik.values.packageType}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}                
  >
    {data.strapiPricingPage.cookie_types.map((item) => (
      <FormControlLabel 
        key={item.CookieType} 
        value={item.CookieType} 
        control={<Radio />} 
        label={item.CookieType} 
      />                           
    ))}
  </RadioGroup>
</FormControl>

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