formik 在幕后使用 formData 吗？

Question

我正在尝试使用 formik 表单上传图像，如果不是，如何将 formik 表单值转换为 formData？

Answer 1

Formik 保留通常在onSubmit从<form>. 您可以将其添加到 FormData 对象，以 json 形式发送等。

为了澄清你的问题，该函数FormData有一个大写的 F （如Object）new Object()，但一个常见的约定是调用其值分配给的变量formData（小写 f），例如：

let formData = new FormData();

回到福米克——

Formik 非常好，因为它可以处理表单处理的许多细节，而无需您自己完成所有样板，例如存储输入字段值的状态、 、 、onSubmit等onBlur的onChange内置处理程序。

不过，它不会将输入字段中的值附加到任何类型的对象。

在以下示例中，<Formik>组件将这些值的 props 传递给<Form>组件，该组件旨在自动使用它们。

我的猜测是大多数人都使用application/json中的功能fetch，因为它不需要这些额外的步骤，但如果您想使用FormData对象，则必须显式调用它。

以下是它在上下文中的工作方式：

// Path: `/projectRoot/src/BriefFormikForm.jsx`
import React from 'react';
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { formPost } from "./formPost";

const endpoint = "https://oursamedomain.net/phpmailer.php";

const nameRegEx = "^[aA-zZs-]+$";

const initialValues = {
  name: "",
  email: "",
  message: "",
};

const validationSchema = Yup.object({
  name: Yup.string()
    .matches(nameRegEx, `Must be only letters or hyphen`)
    .required(`Name is required`),
  email: Yup.string()
    .email(`That's not an email address!`)
    .required(`Email address is required`),
  message: Yup.string()
    .min(50, `Please include more details...`)
    .required(`Message is required`),
});

export default () => {
  return (
    <div>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}

        /* onSubmit is where you'll retrieve the
           state (values) from the input fields: */
        onSubmit={(values, actions) => {

          /* Then create a new FormData obj */
          let formData = new FormData();

          /* FormData requires name: id */
          formData.append("website", "question");
          
          /* append input field values to formData */
          for (let value in values) {
            formData.append(value, values[value]);
          }

          /* Can't console.log(formData), must
             use formData.entries() - example:  */
          for (let property of formData.entries()) {
            console.log(property[0], property[1]);
          }

          /* Now POST your formData: */
          formPost(endpoint, formData);
        }}
      >

        /* here's your html-like form */
        {(props) => (
          <Form onSubmit={props.handleSubmit}>
            <input
              htmlFor="name"
              id="name"
              name="name"
              placeholder="Name goes here"
              type="text"

            /* built-in props from <Formik /> */
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              value={props.values.name}
            />
            <input
              htmlFor="email"
              id="email"
              name="email"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Email address goes here"
              type="text"
              value={props.values.email}
            />
            <textarea
              htmlFor="message"
              id="message"
              name="message"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Question goes here"
              rows="8"
              type="text"
              value={props.values.message}
            />
          </Form>
        )}
      </Formik>
    </div>
  );
};

这是一个fetch将 formData POST 到.PHP同一服务器上的文件的函数。此示例记录对象中的所有值response- 如果这对您来说调试信息太多，请摆脱循环for in：

// Path: `/projectRoot/src/formPost.js`
export const formPost = (endpoint, formData) => {
  fetch(endpoint, {
    method: 'POST',
    mode: 'same-origin',
    body: formData,
  })
    .then(response => {

      /* tell me everything you know! */
      for (let key in response) {
        console.log('response: ', key, response[key]);
      }

      const result = response.text();
      if (!response.ok) {
        throw new Error('HTTP error: ', response.status);
      }
      return result;
    })
    .then(result => {
      console.log('fetch result: ', result);
    })
    .catch(error => {
      console.log('fetch error: ', error.message);
    });
};

其他资源：

官方网站上的基本示例教程：

使用 withFormik HOC 的异步 onSubmit 示例