Netify gatsby表单提交无法使用自定义成功组件

Question

我使用的是带有gatsby JS的Netify表单。当用户提交表单时，我试图显示一个成功警报组件。这很好，但我无法在我的Netify帐户下获取表单数据。

handleSubmit = (e) => {
this.setState({showSuccessMsg: true});
e.preventDefault();
};
<form name="subscribe"
method="POST"
onSubmit={this.handleSubmit}  // custom handler 
action=""
data-netlify="true"
data-netlify-honeypot="bot-field"
className="form-inline d-flex">
<input type="hidden" name="form-name" value="subscribe"/>
<input type="hidden" name="bot-field"/>
.....
.....
<button type="submit" className="btn btn-primary mx-auto">
Subscribe
</button>
</form>
<div>
{this.state.showSuccessMsg ? <SuccessAlert/> : ''}
</div>

PS：评论这个// onSubmit={this.handleSubmit}，我可以得到数据，但我失去了显示成功的警报。

Answer 1

Netlify表单设置-成功消息

默认情况下，当访问者完成表单时，他们将看到一条带有返回表单页面链接的通用风格的成功消息。您可以将默认的成功消息替换为您创建的自定义页面，方法是向标记添加操作属性，并输入自定义页面的路径(如"/pages/success"(作为值。路径必须相对于站点根，以/开头。

或者您可以从Netlify中查看本指南-如何在React应用程序中集成Netlify的表单处理，该应用程序有一个特定于gatsby的使用js提交的示例。

import React, {useState} from 'react'
function encode(data) {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
.join('&')
}
export default function Contact() {
const [state, setState] = useState({})
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value })
}
const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})
.then(() => alert('success')))
.catch((error) => alert(error))
}
return (
<>
<h1>Contact</h1>
<form
name="contact"
method="post"
action="/thanks/"
data-netlify="true"
data-netlify-honeypot="bot-field"
onSubmit={handleSubmit}
>
{/* The `form-name` hidden field is required to support form submissions without JavaScript */}
<input type="hidden" name="form-name" value="contact" />
<div hidden>
<label>
Don’t fill this out: <input name="bot-field" onChange={handleChange} />
</label>
</div>
<label>
Your name:
<input type="text" name="name" onChange={handleChange} />
</label>
<label>
Your email:
<input type="email" name="email" onChange={handleChange} />
</label>
<label>
Message:
<textarea name="message" onChange={handleChange} />
</label>
<button type="submit">Send</button>
</form>
</>
)
}