reactjs - 如何使用 Formik 和 Yup 验证 material-ui 选择

Question

我刚从 Yup 和 Formik 开始。我有一个非常基本的表格。在使用 Yup 进行验证方面，我拥有的 TextFields 工作得很好。选择是我遇到的麻烦。我一直试图让它像我的文本字段一样被要求。我已经用谷歌搜索了一段时间，但到目前为止我还没有找到任何有帮助的东西。

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

如果我注释掉 Yup 验证要求并注销提交时的值，则确实会显示所选值，因此至少似乎可以正常工作。只是无法弄清楚如何验证它。

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>

标签： reactjsmaterial-uiformikyup