使用窗体窗口

反应钩 窗体参数。 。 。 .

与React和React Industrial合作.

安装

# NPM
npm install @formspark/use-formspark

# Yarn
yarn add @formspark/use-formspark

要求反应出18或19和节点.js 18或更新.

使用量

import React, { useState } from "react";
import { useFormspark } from "@formspark/use-formspark";

const ContactForm = () => {
  const [submit, submitting] = useFormspark({
    formId: "your-form-id"
  });
  const [message, setMessage] = useState("");
  return (
    <form onSubmit={async (e) => {
        e.preventDefault();
        await submit({ message });
    }}>
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit" disabled={submitting}>Send</button>
    </form>
  );
};

说明: 不要混淆表单的动作 URL(例如. https://submit-form.com/capybara)与表单ID(例如. capybara) (中文(简体) ). 此软件包只使用后者 .

处理错误

submit 丢出一个 FormsparkError 当服务器以非-2xx状态响应时. 错误带有 HTTP 状态和响应正文, 尽可能解析为 JSON, 否则保留为原始文本 .

import { useFormspark, FormsparkError } from "@formspark/use-formspark";

try {
  await submit({ message });
} catch (error) {
  if (error instanceof FormsparkError) {
    console.error(error.status, error.body);
  }
}

许可证

麻省理工学院