使用 React 的表单可以被识别，但提交不会被捕获

Question

我使用 Netlify 表单有一段时间了，并且很喜欢它们。然而，这是我第一次在 React 应用程序中使用它们，并且在让它们工作时遇到了一些麻烦。我遵循了官方指南，我的表单被识别并显示在我的仪表板上，但提交没有任何作用。控制台没有记录任何错误。我尝试过摆弄属性等，但似乎无法让它捕获提交，并且不知道从哪里开始寻找。

这是我的网站：eddie-traylor.netlify.app/ 这是我的 github 存储库：github.com/naughty-cat-team/eddie-traylor

这是我的index.html代码，我已将其包含在正文部分下：

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="tel" name="phone" />
    <textarea name="message"></textarea>
  </form>

这是我的联系表单组件：

import { useForm } from "react-hook-form";

const Contact = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => window.location.replace("/thankyou");

  return (
    <div className="px-6 mx-auto md:px-8 max-w-[1110px]">
      <div className="bg-white p-6 xl:px-10">
        <div className="hero-bg md:flex md:items-start xl:mt-10">
          <div className="pt-[50px] px-6 text-white md:px-10 md:basis-1/2">
            <h2>CONTACT</h2>
            <p className="mt-4">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse nam, beatae quas dolorum cum temporibus? Veniam ullam quibusdam nam! Sint delectus fugit eveniet
              blanditiis quas ratione animi vero cum.
            </p>
          </div>

          <form method="post" name="contact" onSubmit={handleSubmit(onSubmit)} className="contact px-6 pb-[70px] md:px-10 md:basis-1/2 md:pt-[50px]">
            <input type="hidden" name="form-name" value="contact" />
            <div className="mb-[50px] space-y-[14px]">
              <div className="relative w-full">
                <input
                  type="text"
                  name="name"
                  {...register("name", {
                    required: "Required",
                  })}
                  placeholder="Name"
                  className={`${errors.name ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.name && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.name.message}</p>}
              </div>
              <div className="relative">
                <input
                  type="email"
                  name="email"
                  {...register("email", {
                    required: "Required",
                    pattern: {
                      value: /[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/,
                      message: "Invalid",
                    },
                  })}
                  placeholder="Email Address"
                  className={`${errors.email ? "border-red placeholder:text-red/50" : ""}`}
                />
                {errors.email && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.email.message}</p>}
              </div>
              <div>
                <input type="tel" name="phone" {...register("phone")} placeholder="Phone" />
              </div>
              <div className="relative">
                <textarea
                  type="text"
                  name="message"
                  cols="30"
                  rows="4"
                  {...register("message", {
                    required: "Required",
                  })}
                  placeholder="Your Message"
                  className={`${errors.message ? "border-red placeholder:text-red/50" : ""}`}
                ></textarea>
                {errors.message && <p className="absolute bottom-5 text-[12px] leading-[18px] tracking-[.08px] text-red right-4 md:right-6 italic">{errors.message.message}</p>}
              </div>
            </div>
            <button type="submit" className="btn text-center text-white w-[170px] h-auto md:w-auto">
              Submit
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

非常感谢您的帮助或指导！

布伦登

Answer 1

首先在下面的代码中添加错误

const {
    register,
    handleSubmit,
    **errors**,
    formState: { errors },
  } = useForm();

错误控制台，提交时字段上可能存在一些错误，因此不会提交表单。检查并告诉我。