useFormik，handlesubmit 不适用于 validationschema
useFormik, handlesubmit doesn't work with validationschema
我尝试使用 formik 创建一个表单注册，是的，用于处理错误输入，但是当我尝试提交我的表单时，没有任何反应。关于 yup evyrthing 很好，它向我显示错误，但是当我删除 validationschema 时，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 上出错。
嗯，我看到问题是关于 validationSchema ，这里是你可以做的。
1-)
创建你的 validationSchema 简单
const validationSchema = Yup.object().shape({
fullName: Yup.string().min(3).max(25).required(),
lastName: Yup.string().min(3).max(45).required(),
password: Yup.string().min(4).max(25).required(),
});
然后在Formik形式中使用validationSchema。
代替form
应该是这样的
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
</Formik>
你也可以使用ErrorMessage
<ErrorMessage
name="fullName"
component="span"
className="erorName"
/>
像这样导入：
import { Formik, Form, Field, ErrorMessage } from "formik";
我发现了我的错误，我从 yup 中删除了 registerSchema 上所有必需的方法，现在它可以工作了，也许我出错了，因为我在 yup 和我的文本字段上调用了 required。现在好了。
我尝试使用 formik 创建一个表单注册，是的，用于处理错误输入，但是当我尝试提交我的表单时，没有任何反应。关于 yup evyrthing 很好，它向我显示错误，但是当我删除 validationschema 时，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 上出错。
嗯，我看到问题是关于 validationSchema ，这里是你可以做的。
1-) 创建你的 validationSchema 简单
const validationSchema = Yup.object().shape({
fullName: Yup.string().min(3).max(25).required(),
lastName: Yup.string().min(3).max(45).required(),
password: Yup.string().min(4).max(25).required(),
});
然后在Formik形式中使用validationSchema。
代替form
应该是这样的
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
</Formik>
你也可以使用ErrorMessage
<ErrorMessage
name="fullName"
component="span"
className="erorName"
/>
像这样导入：
import { Formik, Form, Field, ErrorMessage } from "formik";
我发现了我的错误，我从 yup 中删除了 registerSchema 上所有必需的方法，现在它可以工作了，也许我出错了，因为我在 yup 和我的文本字段上调用了 required。现在好了。