Formik 验证模式阻止调用 onSubmit 方法答案

【问题标题】：Formik Validation Schema preventing onSubmit method to be calledFormik 验证模式阻止调用 onSubmit 方法
【发布时间】：2023-01-16 18:49:31
【问题描述】：

这是我第一次使用 Formik，我正在尝试使用它来验证用户注册表。这是我的代码：

interface Props { }

export interface RegisterData {
    name: string;
    email: string;
    password: string;
    status?: boolean
}

const validationSchema: SchemaOf<RegisterData> = yup.object().shape({
    name: yup
        .string()
        .max(20, "Name cannot be more than 20 characters")
        .required("name is required"),
    email: yup
        .string()
        .email("Enter a valid email")
        .required("Email is required"),
    password: yup
        .string()
        .min(8, "Password should be of minimum 8 characters")
        .required("Password is required"),
    status: yup
        .boolean()
        .notRequired()
});

const Create: React.FC<Props> = () => {
    const dispatch = useAppDispatch();
    const theme = useTheme();
    const navigate = useNavigate();
    const [checked, setChecked] = useState<boolean>(false);

    const initialFormValues: RegisterData = {
        name: "",
        email: "",
        password: ""
    }

    const handleChecked = (event: any) => {
        console.log(event.target.checked);
        setChecked(event.target.checked);
    }

    const handleSubmit = async (values: any) => {
        console.log("hello");
        console.log(values);
        
    }

    const formik = useFormik({
        initialValues: initialFormValues,
        validationSchema: validationSchema,
        onSubmit: handleSubmit
    })

    return (
        <Box
            ...
                <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 2 }}>
                    <Grid container spacing={1}>
                        <Grid item xs={12}>
                            <Typography
                                variant="subtitle1"
                                sx={{
                                    color: theme.palette.text.secondary
                                }}
                            >
                                {Constants.Create.NAME_HEADER}
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                margin="normal"
                                required
                                fullWidth
                                id="name"
                                name="name"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <Typography
                                variant="subtitle1"
                                sx={{
                                    color: theme.palette.text.secondary
                                }}
                            >
                                {Constants.Create.EMAIL_HEADER}
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                margin="normal"
                                required
                                fullWidth
                                id="email"
                                name="email"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <Typography
                                variant="subtitle1"
                                sx={{
                                    color: theme.palette.text.secondary
                                }}
                            >
                                {Constants.Create.PASSWORD_HEADER}
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                type="password"
                                margin="normal"
                                required
                                fullWidth
                                id="password"
                                name="password"
                                label="Required"
                                variant="filled"
                                size="small"
                                sx={{
                                    marginTop: "0px"
                                }}
                            />
                        </Grid>
                    </Grid>
                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        size="large"
                        sx={{ mt: 2, mb: 2 }}
                    >
                        {Constants.Create.CREATE_ACCOUNT}
                    </Button>
                </Box>
        </Box >
    )
}

当我单击我的提交按钮并调用 handleSubmit 时，没有任何反应，我也没有看到 hello 或 values 被打印到控制台。但是，当我从 useFormik 中删除 validationSchema 时，我可以获得输出。

为什么会这样？如何将 schemaValidation 添加到 Formik？

【问题讨论】：

不太了解情况但从不编写空接口。那是不相关的，但你需要知道它。 TS 是结构性的。

标签： javascript typescript formik yup

【解决方案1】：

我想问题可能是你没有控制你的领域的状态。

您可以尝试添加指向formik values状态和handleChange方法的value和onChange属性。

另外，仅作为建议，将initialFormValues对象放在函数组件体之外，您不需要在每次重新渲染时都重新创建它。

例子：

<TextField
     value={formik.values.password}
     onChange={formik.handleChange}
     ...your other props
 />

【讨论】：