Как выполнить POST-запрос, только если форма проверена с помощью response-hook-form?

Question

Я хочу создать контактную форму, используя FlexyForm в моем проекте Gatsby, чтобы отправить информацию по электронной почте. Настройка очень проста, и вам просто нужно добавить к нормальной форме тег HTML - method="post" action="https://www.flexyform.com/f/flexyformkey"

Итак, у меня была такая форма, которая работала, а затем я хотел добавить проверку формы, чтобы Я использовал форму реагирования, и проверка работает отлично, но после проверки она не отправляет запрос на публикацию в FlexyForm.

Я заполняю форму, чтобы выполнить проверку, и нажимаю кнопку отправки, но не для регистрации в реестре. с консолью ничего не происходит. Без реактивной формы обычно он перенаправляет меня туда, куда я устанавливаю FlexyForm для перенаправления после получения данных.

песочница: https://codesandbox.io/s/nervous-pine-o2z5m (^^ он не включает ключ для очевидного причины)

Позже я подумал, что мне следует использовать fetch, чтобы сделать запрос на публикацию внутри onSubmit, но я не уверен, что поместить в него.

Я совсем новичок Реагировать и Гэтсби, так что может быть что-то очевидное, что я пропускаю

Answer 1

Да, вы должны использовать fetch в onSubmit. Попробуйте это.

const onSubmit = async (data) => {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    };

    const response = await fetch([URL_IS_HERE], requestOptions);
    const jsonData = await response.json();

    console.log(jsonData);
}