1

我想在我的 Gatsby 项目中使用 FlexyForm 创建一个联系表单，以便通过电子邮件发送信息。它的设置非常简单，您只需要添加到普通表单 HTML 标记 -method="post" action="https://www.flexyform.com/f/flexyformkey"

所以我有一个这样的表单正在运行，然后我想添加表单验证，所以我使用了 react-hook-form 并且验证效果很好，但是在验证之后它不会向 FlexyForm 发出 post 请求。

我填写表格以满足验证并点击发送按钮，但除了将寄存器记录到控制台之外，没有任何反应。如果没有 react-hook-form，它通常会将我重定向到我将 FlexyForm 设置为在接收数据后重定向的任何位置。

沙箱：https ://codesandbox.io/s/nervous-pine-o2z5m （^^ 它不包含密钥，原因很明显）

后来我想我应该用fetch它在里面发出一个帖子请求，onSubmit但我不知道在里面放什么。

我对 React 和 Gatsby 很陌生，所以很明显我错过了一些东西。

4

1 回答 1

3

是的，您应该在 onSubmit 中使用 fetch。尝试这个。

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);
}
于 2020-03-28T15:41:52.600 回答