Netify-gatsby 表单提交不适用于自定义成功组件

Question

我正在使用 Netify-form 和 gatsby JS。当用户提交表单时，我试图显示一个成功警报组件。这工作正常，但我无法在我的 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 forms setup - Success messages

By default, when visitors complete a form, they will see a generically styled success message with a link back to the form page. You can replace the default success message with a custom page you create by adding an action attribute to the tag, entering the path of your custom page (like "/pages/success") as the value. The path must be relative to the site root, starting with a /.

或者您可以查看 Netlify - How to Integrate Netlify’s Form Handling in a React App 中的本指南，其中有一个使用 js 提交的 gatsby 特定示例。

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>
    </>
  )
}

Netify-gatsby 表单提交不适用于自定义成功组件

Netify-gatsby form submission not working with custom Success Component

forms

reactjs

gatsby

netlify