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 集成示例）

Answer 2

您應該將 id 添加到表單中。

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

並用提交按鈕綁定表單ID

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