Netlify 没有检测到 GatsbyJS 表单答案

【问题标题】：Netlify is not detecting GatsbyJS formNetlify 没有检测到 GatsbyJS 表单
【发布时间】：2019-11-27 06:39:00
【问题描述】：

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

该表单具有 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 都在 src 的同一个 pages 文件夹中。

我不确定这个有什么问题。

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

谢谢！

【问题讨论】：

标签： javascript reactjs gatsby netlify

【解决方案1】：

解决方案

原来错误的原因与 Netlify 或 Gatsby 无关。

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

我正在使用useTransition 钩子为联系人卡片制作淡入/淡出动画，该钩子在开始时默认为false。这有效地将联系人卡片从 DOM 元素中取出，因此 Netlify 无法检测到它。作为一种解决方案，我改用了useSpring 钩子，它用opacity: 0 和pointer-events: none 隐藏了联系人卡片。

这解决了问题。

【讨论】：