单击提交按钮时 Formik 未提交。 （反应和 NextJS）

Question

加载页面时会自动填写表单输入campaignid。

我已将 onChange 和 onBlur 添加到 name 输入中以防止出现默认情况，但是当您单击提交按钮时，不会执行任何操作。

我正在使用第三方脚本来获取 URL 参数并将其插入到 campaignid 值中。

import * as React from "react";
import Script from "next/script";
import { Field, Form, Formik } from "formik";   

import {
  Button,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
} from "@chakra-ui/react";


export default function FormikForm() {
  function validateName(value) {
    let error;
    if (!value) {
      error = "Type a valid name.";
    }
    return error;
  }

  return (
    <>
      <Script src="https://cdn.jsdelivr.net/gh/gkogan/sup-save-url-parameters/sup.min.js" />

      <Formik
        initialValues={{
          name: "",
        }}
        onSubmit={(values) => {
          setTimeout(() => {
            fetch(`https://hooks.zapier.com/hooks/catch/3660927/bte5w75/`, {
              method: "POST",
              body: JSON.stringify(values, null, 2),
            }),
              3000;
          });
        }}
      >
        {(props) => (
          <Flex>
            <Form id="hero">
              <Field name="name" validate={validateName}>
                {({ field, form }) => (
                  <FormControl
                    isInvalid={form.errors.name && form.touched.name}
                  >
                    <FormLabel htmlFor="name">Nome</FormLabel>
                    <Input
                      {...field}
                      id="name"
                      onChange={(e) => {
                        e.preventDefault();
                      }}
                      onBlur={(e) => {
                        e.preventDefault();
                      }}
                    />
                    <FormErrorMessage>{form.errors.name}</FormErrorMessage>
                  </FormControl>
                )}
              </Field>

              <Field name="campaignid">
                {({ field }) => (
                  <FormControl isReadOnly>
                    <Input {...field} type="hidden" id="campaignid" />
                  </FormControl>
                )}
              </Field>

              <Button
                id="submited"
                isLoading={props.isSubmitting}
                type="submit"
              >
                Submit
              </Button>
            </Form>
          </Flex>
        )}
      </Formik>
    </>
  );
}