时间戳

首页 > 解决方案 > Netlify 没有检测到 GatsbyJS 表单

javascript - Netlify 没有检测到 GatsbyJS 表单

问题描述

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

该表单具有 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在src.

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

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

谢谢！

标签： javascriptreactjsgatsbynetlify

解决方案

解决方案

结果发现错误的原因与 Netlify 或 Gatsby 无关。

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

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

这解决了这个问题。

推荐阅读