使用React将提交的表单值保存到JSON文件中

import React, { useState } from "react";
import { useFormik } from "formik";
import axios from "axios";
import { saveAs } from "file-saver";

const FormComponent = () => {
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      // 其他表单字段
    },
    onSubmit: (values) => {
      // 将表单数据保存到JSON对象中
      const jsonData = JSON.stringify(values);

      // 发送POST请求保存JSON文件
      axios
        .post("/save-json", jsonData, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(() => {
          // 保存成功后生成文件并下载
          const blob = new Blob([jsonData], { type: "application/json" });
          saveAs(blob, "form_data.json");
        })
        .catch((error) => {
          console.error("保存JSON文件出错:", error);
        });
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">姓名:</label>
      <input
        id="name"
        name="name"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.name}
      />

      <label htmlFor="email">邮箱:</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      {/* 其他表单字段 */}
      
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;