reactjs - Formik 表单无法识别 Material ui 按钮
问题描述
我正在使用带有 Materail UI 的 Formik 构建登录表单,但 Formik 无法识别 Material UI 的按钮。如果我用 html 按钮替换 Button 一切正常。任何人都可以解释为什么它不能与 Button 组件一起使用。下面是我的代码:
import React, { ReactElement } from "react";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import { Formik, Form } from "formik";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
const useStyles = makeStyles((theme) => ({
root: {
margin: theme.spacing(1),
width: 200,
display: "flex",
},
input: {
marginTop: 5,
marginBottom: 5,
},
}));
interface Props {}
export default function loginForm({}: Props): ReactElement {
const classes = useStyles();
return (
<Box className={classes.root}>
<Formik
initialValues={{ username: "", password: "" }}
validate={(values) => {
const errors: { username?: string; password?: string } = {};
if (!values.username) {
errors.username = "Required";
} else if (!values.password) {
errors.password = "Required";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
console.log("values: ", values);
setSubmitting(false);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<form onSubmit={handleSubmit}>
<FormControl>
<TextField
className={classes.input}
error={errors.username ? true : false}
type="username"
name="username"
onChange={handleChange}
onBlur={handleBlur}
value={values.username}
label="Username"
variant="outlined"
helperText={
errors.username && touched.username && errors.username
}
/>
<TextField
className={classes.input}
error={errors.password ? true : false}
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
label="Password"
variant="outlined"
helperText={
errors.password && touched.password && errors.password
}
/>
</FormControl>
<Box display="flex" justifyContent="space-between">
<Button
variant="contained"
color="primary"
disabled={isSubmitting}
>
Submit
</Button>
<Button
variant="contained"
color="secondary"
disabled={isSubmitting}
>
Cancel
</Button>
</Box>
</form>
)}
</Formik>
</Box>
);
}
请注意上面的代码不起作用,但是如果您将 Button 替换为 button,则表单可以正常工作。
解决方案
在大多数浏览器中,默认情况下 HTML 按钮具有 ,type=submit
这意味着将调用 Formik 的提交处理程序。Material-UI 按钮没有此默认值,因此永远不会调用提交处理程序。尝试添加type=submit
到您的<Button>
道具中。
(另外,查看 Formik 的Material-UI 集成示例)
推荐阅读
- python - 如何在 pygame 中找到三角形的中点,然后递归地重复执行它以制作谢尔宾斯基三角形?
- jestjs - 笑话:如何从 setupFilesAfterEnv 脚本访问记者实例?
- linux - 我应该在使用 `gpio_to_desc` 返回的 `gpio_desc` 之前使用 `gpio_free` 吗?
- python - 如何使用 Matplotlib 动画预测世界人口增长?
- flutter - 不能改变布尔值
- javascript - 如何使用 D3/Javascript 更改位于同一 Div 中的部分文本的颜色
- java - 在嵌套循环中查找最小和最大数字
- reactjs - 无法在类型“y”上查询字段“x”
- node.js - Kubernetes 中的 Pod 到 Pod 通信
- python - 我有一个错误:“TypeError:'str' object is not callable”-Python