如何使用Formik和Yup验证Material-UI选择

问题描述

我刚开始是Yup和Formik。我有一个很基本的形式。在使用Yup进行验证方面，我拥有的TextField工作得很好。选择是我遇到的麻烦。我一直在尝试让它像我的文本字段一样被要求。我已经搜寻了一段时间，但是到目前为止我还没有发现任何有用的东西。

我尝试做自己的验证，该验证发生在onBlur上并且有效，但是当尝试仅保存而不填写任何值时，它就失败了。文本字段将显示必填，但选择项将不显示任何内容。您可以填写文本字段，然后尝试再次保存。这样做将立即显示选择的必需消息，因为它可以提交。据我所知，直到所有需要Yup的字段都可以使用时，formik的提交才发生。我将在下面发布我要尝试的内容，我们将不胜感激。

如果我注释了Yup验证要求并注销了Submit的值，则所选值的确会显示出来，因此至少起了作用。只是不知道如何验证它。

import React,{ useEffect,useState } from "react";
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { TextField,Select } from "formik-material-ui";
import { Formik,Form,Field } from "formik";
import * as Yup from "yup";
import MenuItem from "@material-ui/core/MenuItem"

const Validation = Yup.object().shape({
    FirstName: Yup.string().required("required"),LastName: Yup.string().required("required"),Gender: Yup.string().required("required"),});

<Formik
        onSubmit={(values) => {
             SaveSettings(values)
        }}
        enableReinitialize
        validateOnChange={false}
        initialValues={data}
        validationSchema={Validation}
    >
        {({ submitForm,handleChange }) => (
            <Form>
                    <Field
                        component={Select}
                        name="Gender"
                        variant="outlined"
                        label="Gender"
                        className={classes.formControl}
                        onChange={e => handleChange(e)} >
                             <MenuItem value="Male">Male</MenuItem>
                             <MenuItem value="Female">Female</MenuItem>
                    </Field>

                    <Grid item>
                    <Field
                        disabled={false}
                        component={TextField}
                        data-id="FirstName"
                        variant="outlined"
                        label="First Name"
                        className={classes.formControl}
                        name="FirstName" />
                    </Grid>

                    <Grid item>
                    <Field
                        disabled={false}
                        component={TextField}
                        data-id="LastName"
                        variant="outlined"
                        label="Last Name"
                        className={classes.formControl}
                        name="LastName" />
                    </Grid>

                    <Grid item>
                        <Button type="button" variant="contained" onClick={submitForm}>Save settings</Button>
                    </Grid>
            </Form>
        )}
    </Formik>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）