Javascript handleSubmit未提交formik表格
我已经为注册页面设置了一个formik表单，但是当我单击submit按钮时，它没有提交表单。另外，由于我使用的是formik表单，所以有一些来自formik的道具和来自父组件的道具。我们可以在一个组件中使用来自两个不同组件的两个道具吗 注册组件Javascript handleSubmit未提交formik表格,javascript,reactjs,formik,Javascript,Reactjs,Formik,我已经为注册页面设置了一个formik表单，但是当我单击submit按钮时，它没有提交表单。另外，由于我使用的是formik表单，所以有一些来自formik的道具和来自父组件的道具。我们可以在一个组件中使用来自两个不同组件的两个道具吗 注册组件 import React, { useState } from "react"; import { Formik } from "formik"; import TextField from "@material-ui/core/TextField";
import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";
import * as Yup from "yup";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
<Link color="inherit" href="sad">
New
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main
},
form: {
width: "100%",
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
}
}));
const SupFirst = props => {
const classes = useStyles();
const [loginError, setLoginError] = useState("");
const [changed, setChanged] = useState(false);
const {setSignup, signup, email, setEmail}=props;
const handleSubmit = async (values, { setSubmitting }) => {
const {email} =values;
setEmail(values);
var body = {
email: email
};
console.log(body);
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify(body)
};
const url = "http://localhost:8000/api/emailcheck";
try {
const response = await fetch(url, options);
const text = await response.text();
setSubmitting(false);
setChanged(false);
console.log(text);
if (text === "does not exist") {
setSignup(true);
} else if (text === "exists") {
props.history.push(`/`);
} else {
setLoginError("Email is invalid");
}
} catch (error) {
console.error(error);
}
};
return (
<Formik
initialValues={{email:""}}
onSubmit={handleSubmit}
//********Using Yup for validation********/
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required("Required"),
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<>
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form
className={classes.form}
onSubmit={handleSubmit}
noValidate
>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
value={values.email}
label="Email Address"
name="email"
autoComplete="email"
onChange={e=>{setChanged(true);handleChange(e)}}
onBlur={handleBlur}
className={errors.email && touched.email && "error"}
/>
{errors.email && touched.email && (
<div className="input-feedback" style={{ color: "red" }}>{errors.email}</div>
)}
{!changed && loginError && (
<div style={{ color: "red" }}>
<span>{loginError}</span>
</div>
)}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isSubmitting}
>
Next
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="/" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
</>
);
}}
</Formik>
);
};
export default SupFirst;
import React，{useState}来自“React”；
从“Formik”导入{Formik}；
从“@material ui/core/TextField”导入TextField；
从“Yup”导入*作为Yup；
从“@material ui/core/Avatar”导入化身；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/icons/LockOutlined”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Container”导入容器；
函数版权（）{
返回(
新的
{" "}
{新日期（）.getFullYear（）}
{"."}
);
}
const useStyles=makeStyles（主题=>({
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main
},
表格：{
宽度：“100%”，
marginTop：主题。间距（1）
},
提交：{
边距：主题。间距（3,0,2）
}
}));
const SupFirst=props=>{
const classes=useStyles（）；
常量[loginError，setLoginError]=useState（“”）；
const[changed，setChanged]=useState（false）；
const{setSignup，signup，email，setEmail}=props；
const handleSubmit=async（值，{setSubmitting}）=>{
const{email}=值；
设置电子邮件（值）；
变量体={
电邮：电邮
};
控制台日志（主体）；
常量选项={
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”
},
body:JSON.stringify（body）
};
常量url=”http://localhost:8000/api/emailcheck";
试一试{
const response=等待获取（url、选项）；
const text=等待响应。text（）；
设置提交（假）；
setChanged（假）；
console.log（文本）；
如果（文本==“不存在”）{
设置信号（真）；
}else if（文本==“存在”）{
props.history.push（`/`）；
}否则{
setLoginError（“电子邮件无效”）；
}
}捕获（错误）{
控制台错误（error）；
}
};
返回(
{props=>{
常数{
价值观
感动的，
错误，
提交，
handleChange，
车把，
手推
}=道具；
返回(
登录
{setchange（true）；handleChange（e）}
onBlur={handleBlur}
className={errors.email&&touch.email&&error}
/>
{errors.email&&touch.email&&(
{errors.email}
)}
{！已更改&&login错误&&(
{loginError}
)}
下一个
已经有帐户了吗？请登录
);
}}
);
};
首先导出默认值；