Formik 表单无法识别 Material ui 按钮

Question

我正在使用带有 Materail UI 的 Formik 构建登录表单，但 Formik 无法识别 Material 按钮 UI。如果我用 html 按钮替换按钮，一切正常。谁能解释为什么它不能与 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，则该表单有效。

Answer 1

在大多数浏览器中，HTML 按钮默认带有 type=submit，这意味着将调用 Formik 的提交处理程序。 Material-UI 按钮没有此默认值，因此永远不会调用提交处理程序。尝试将 type=submit 添加到您的 <Button> 道具中。

（另外，查看 Formik 的 Material-UI integration examples）

Answer 2

您应该将 id 添加到表单中。

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

并将表单id与提交按钮绑定

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

Formik 表单无法识别 Material ui 按钮

Formik form does not recognize Material ui Button

forms

reactjs

material-ui

formik