Reactjs Formik表单无法识别物料ui按钮

我正在用带有MaterialUI的Formik构建一个登录表单，但Formik无法识别MaterialUI的按钮。如果我用html按钮替换按钮，一切都会正常。有人能解释一下为什么按钮组件不起作用吗。下面是我的代码：

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>
  );
}

import React，{ReactElement}来自“React”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControl”导入FormControl；
从“Formik”导入{Formik，Form}；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Box”导入框；
const useStyles=makeStyles（（主题）=>({
根目录：{
边距：主题。间距（1），
宽度：200，
显示：“flex”，
},
输入：{
玛金托普：5，
marginBottom:5，
},
}));
接口道具{}
导出默认函数loginForm（{}:Props）：ReactElement{
const classes=useStyles（）；
返回(
{
常量错误：{username？：string；password？：string}={}；
如果（！values.username）{
errors.username=“必需”；
}else如果（！values.password）{
errors.password=“必需”；
}
返回错误；
}}
onSubmit={（值，{setSubmitting}）=>{
日志（“值：”，值）；
设置提交（假）；
}}
>
{({
价值观
错误，
感动的，
handleChange，
车把，
手推，
提交，
}) => (
提交
取消
)}
);
}

---

请注意，上面的代码不起作用，但如果您将按钮替换为按钮，表单就会起作用。

在大多数浏览器中，HTML按钮默认具有

type=submit

，这意味着将调用Formik的提交处理程序。物料UI按钮没有此默认值，因此永远不会调用提交处理程序。尝试将

type=submit

添加到您的

道具中

---

（另外，请查看Formik）

您应该将id添加到表单中

   <form onSubmit={handleSubmit} id="myForm">

并使用提交按钮绑定表单id

   <Button
     type="submit"
     form="myForm"
   >

尝试传递

type=“submit”

prop-in按钮