我嘗試使用 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 上給我錯誤。
uj5u.com熱心網友回復：
好吧，我看到問題是關于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(),
});
然后使用validationSchemainFormik形式。
代替form
它會是這樣的。
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
</Formik>
你也可以使用 ErrorMessage
<ErrorMessage
name="fullName"
component="span"
className="erorName"
/>
像這樣匯入：
import { Formik, Form, Field, ErrorMessage } from "formik";
uj5u.com熱心網友回復：
我發現了我的錯誤，我從 yup 中洗掉了 registerSchema 上所有必需的方法，現在它可以作業了，也許我出錯了，因為我在 yup 和我的文本欄位上呼叫了 required 。那么現在它的作業原理。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311221.html
標籤：javascript 反应 形式 提交 福米克
上一篇：Django更新用戶表單