Отправка формы Netify-gatsby не работает с пользовательским компонентом успеха - PullRequest
Новая
       13

Отправка формы Netify-gatsby не работает с пользовательским компонентом успеха

0 голосов
/ 20 апреля 2020

Я использую Netify-форму с Гэтсби 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}, я могу получить данные, но проигрываю, показывая предупреждение об успехе.

1 Ответ

1 голос
/ 20 апреля 2020

Настройка форм Netlify - сообщения об успехе

По умолчанию, когда посетители заполняют форму, они увидят сообщение об успехе в общем виде со ссылкой на страницу формы. Сообщение об успехе по умолчанию можно заменить созданной вами пользовательской страницей, добавив в тег атрибут action, указав в качестве значения путь к пользовательской странице (например, «/ pages / success»). Путь должен быть относительно сайта root, начиная с /.

. Или вы можете ознакомиться с этим руководством в Netlify - Как интегрировать обработку форм Netlify в React-приложении с указанием gatsby c для отправки с 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>
    </>
  )
}
...