【发布时间】：2021-12-01 05:18:36
【问题描述】：
我尝试使用 formik 创建一个表单寄存器，并且是的用于处理错误输入，但是当我尝试提交我的表单时没有任何反应。关于是的，evyrthing 很好，它会向我显示错误，但是当我删除验证模式时，handlesubmit 工作。我不知道为什么，有什么想法吗？
这是我的代码：
import React from "react";
import {
Button,
TextField,
Grid,
Paper,
AppBar,
Typography,
Toolbar,
Link,
} from "@material-ui/core";
//import axios from "axios";
import { useFormik } from 'formik';
import * as Yup from 'yup'
import "./auth.css";
export default function LoginFrom() {
const registerSchema = Yup.object().shape({
firstName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
lastName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
username: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
passwordConfirm: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
});
const formik = useFormik({
initialValues:{
firstname: "",
lastname: "",
username: "",
email: "",
password: "",
passwordConfirm: "",
},
validationSchema: registerSchema,
onSubmit: values => {
console.log("submited")
}
})
const handleGoogleLogin = async (e) => {
e.preventDefault();
window.open("http://localhost:5000/auth/google", "_self");
};
return (
<React.Fragment>
<div>
<AppBar position="static" alignitems="center" color="primary">
<Toolbar>
<Grid container justify="center" wrap="wrap">
<Grid item>
<Typography variant="h6">NETFLIX</Typography>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Grid container spacing={0} justify="center" direction="row">
<Grid item>
<Grid
container
direction="column"
justify="center"
spacing={2}
className="login-form"
>
<Paper
variant="elevation"
elevation={2}
className="login-background"
>
<Grid item>
<Typography component="h1" variant="h5">
Sign in
</Typography>
</Grid>
<Grid item>
<form onSubmit={formik.handleSubmit}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
type="email"
placeholder="Email"
fullWidth
name="email"
variant="outlined"
required
autoFocus
value={formik.values.email}
onChange={formik.handleChange}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Username"
fullWidth
name="username"
variant="outlined"
required
value={formik.values.username}
onChange={formik.handleChange}
error={formik.touched.username && Boolean(formik.errors.username)}
helperText={formik.touched.username && formik.errors.username}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Firstname"
fullWidth
name="firstname"
variant="outlined"
required
value={formik.values.firstname}
onChange={formik.handleChange}
error={formik.touched.firstname && Boolean(formik.errors.firstname)}
helperText={formik.touched.firstname && formik.errors.firstname}
/>
</Grid>
<Grid item>
<TextField
type="text"
placeholder="Lastname"
fullWidth
name="lastname"
variant="outlined"
required
value={formik.values.lastname}
onChange={formik.handleChange}
error={formik.touched.lastname && Boolean(formik.errors.lastname)}
helperText={formik.touched.lastname && formik.errors.lastname}
/>
</Grid>
<Grid item>
<TextField
type="password"
placeholder="Password"
fullWidth
name="password"
variant="outlined"
required
value={formik.values.password}
onChange={formik.handleChange}
error={formik.touched.password && Boolean(formik.errors.password)}
helperText={formik.touched.password && formik.errors.password}
/>
</Grid>
<Grid item>
<TextField
type="password"
placeholder="Password Confirm"
fullWidth
name="passwordConfirm"
variant="outlined"
required
value={formik.values.passwordConfirm}
onChange={formik.handleChange}
error={formik.touched.passwordConfirm && Boolean(formik.errors.passwordConfirm)}
helperText={formik.touched.passwordConfirm && formik.errors.passwordConfirm}
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
type="submit"
className="button-block"
>
Submit
</Button>
</Grid>
</Grid>
</form>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot Password?
</Link>
<Button
variant="contained"
color="primary"
className="button-block"
onClick={handleGoogleLogin}
>
Login With Google
</Button>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</div>
</React.Fragment>
);
}
正如我所说，yup 模式有效，它关于 useFormik 上的 validationSchema，这给了我在 handleSubmit 上的错误。
【问题讨论】：
标签： javascript reactjs forms submit formik