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

Posted 2023-02-18

【中文标题】带有 Formik 的 Material UI 单选按钮 - 未设置 onSubmit 的值

【英文标题】：MaterialUI Radio buttons with Formik - value not set 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>

【参考方案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>