javascript - Netlify 未检测到 GatsbyJS 表单

Question

我制作了一个简单的联系表单，其中包含姓名、电子邮件和文本框。

该表单包含 Netlify 检测所需的所有元素，例如 data-netlify="true" 和 data-netlify-honeypot="bot-field"。其他一切似乎都遵循 Netlify/React 表单博客解释的约定。

TestContactForm.component.jsx

import React, { useState } from "react"

const TestContactForm = () => {
  const [formInput, setFormInput] = useState({
    name: "",
    email: "",
    message: "",
  })

  const onChange = e => {
    setFormInput({
      ...formInput,
      [e.target.name]: e.target.value,
    })
  }

  return (
    <form
      name="contact"
      method="post"
      action="/thanks"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
      <input type="hidden" name="form-name" value="contact" />
      <div hidden>
        <label>
          Don’t fill this out: <input name="bot-field" />
        </label>
      </div>

      <div>
        <label htmlFor="name">Hello, my name is</label>
        <input
          name="name"
          id="name"
          type="text"
          placeholder="Jane Doe"
          required
          value={formInput.name}
          onChange={onChange}
        />
      </div>

      <div>
        <label htmlFor="email">Hello, my name is</label>
        <input
          name="email"
          id="email"
          type="text"
          placeholder="janedoe@work.com"
          required
          value={formInput.email}
          onChange={onChange}
        />
      </div>

      <div>
        <label htmlFor="message">I want to</label>
        <textarea
          name="message"
          id="message"
          rows="5"
          maxLength="250"
          placeholder="briefly share an idea about..."
          required
          value={formInput.message}
          onChange={onChange}
        ></textarea>
      </div>

      <button type="submit">SEND</button>
    </form>
  )
}

export default TestContactForm

我在 Netlify 托管的其他网站上的表单上使用了几乎相同的代码，并且它们工作得很好。

/、/thanks 和 /404 均位于 内的同一个 pages 文件夹内源代码。

我不确定这个出了什么问题。

有人可以指出这里的错误是从哪里产生的吗？

谢谢!

Answer 1

解决方案

事实证明，错误原因与 Netlify 或 Gatsby 无关。

这与我使用的动画库有关，它是 react-spring。

我使用 useTransition Hook 为联系人卡片制作淡入/淡出动画，该 Hook 在开始时默认为 false。这实际上将联系人卡片从 DOM 元素中取出，因此 Netlify 无法检测到它。作为解决方案，我转而使用 useSpring Hook ，它使用 opacity: 0 和 pointer-events: none 隐藏联系人卡片。

这解决了问题。