带有 Formik 的 Material UI 单选按钮 - 未设置 onSubmit 的值答案

【问题标题】：MaterialUI Radio buttons with Formik - value not set onSubmit带有 Formik 的 Material UI 单选按钮 - 未设置 onSubmit 的值
【发布时间】：2022-01-08 04:55:05
【问题描述】：

我有一个使用 MaterialUI 做出反应的 formik 表单，所有控件都在提交时传递它们的值，除了单选按钮组。

这是我的设置，我是否缺少 formik 需要的属性或有什么不合适的地方？它似乎与我在其他地方看到的例子相匹配。目前该字段没有验证模式。

const formik = useFormik({
            initialValues: {
                email: '',
                packageType: '',
            },
            validationSchema: validationSchema,
            onSubmit: (values) => {
                sendRequestEmail(values);
            },
        });

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

【问题讨论】：

标签： reactjs material-ui formik yup

【解决方案1】：

显然它需要在订单项级别，而不是在示例显示的 RadioGroup 中：

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

【讨论】：