Javascript Netlify没有检测到GatsbyJS表单

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

表单具有Netlify检测所需的所有元素，例如

data Netlify=“true”

和

data Netlify honeypot=“bot field”

。其他一切似乎都遵循Netlify/React表单博客解释的约定

TestContactForm.component.jsx

import React，{useState}来自“React”
const TestContactForm=（）=>{
常量[formInput，setFormInput]=useState({
姓名：“，
电邮：“，
消息：“”，
})
const onChange=e=>{
设置输入({
…形成输入，
[e.target.name]：e.target.value，
})
}
返回(
不要填写以下内容：
你好，我的名字是
你好，我的名字是
我想
发送
)
}
导出默认TestContactForm

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

/

、

/谢谢

和

/404

都在

src

中相同的

页面

文件夹中

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

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

谢谢

解决方案

结果表明，错误的原因与Netlify或Gatsby无关

这与我使用的动画库有关，它是

react-spring

我正在使用

useTransition

钩子为联系人卡的淡入/淡出动画制作动画，该钩子在开始时默认为

false

。这有效地将联系人卡从DOM元素中取出，因此Netlify无法检测到它。作为解决方案，我转而使用

useSpring

hook，它用

opacity:0

和

指针事件：none

隐藏联系人卡

这就解决了问题