在react js中只发送formik表单中的非空值提交

在React JS中使用Formik库提交表单时，有时我们只想提交非空值。这可以通过自定义提交处理函数来实现，该函数会检查每个字段的值，然后只发送非空值。

基础概念

Formik是一个流行的React库，用于简化表单的状态管理和验证。它允许你通过values对象访问表单字段的值，并通过setFieldValue方法更新这些值。

类型

受控组件：Formik管理的表单字段是受控组件，这意味着它们的值由React状态控制。
提交处理：Formik提供了一个onSubmit函数，当表单提交时会被调用。

应用场景

用户注册/登录表单：在这些表单中，可能希望只提交有效的、非空的字段。
数据收集表单：在收集用户数据的表单中，可能需要过滤掉未填写的字段。

问题与解决方案

如果你遇到只发送formik表单中的非空值提交的问题，可以通过以下步骤解决：

自定义提交函数：在onSubmit函数中，创建一个新的对象，只包含非空字段。

import React from 'react';
import { Formik, Form, Field } from 'formik';

const MyForm = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    // 创建一个新对象，只包含非空字段
    const nonEmptyValues = Object.entries(values).reduce((acc, [key, value]) => {
      if (value) {
        acc[key] = value;
      }
      return acc;
    }, {});

    // 发送非空值到服务器
    console.log(nonEmptyValues);
    // 这里可以替换为实际的API调用
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{ firstName: '', lastName: '', email: '' }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="firstName" placeholder="First Name" />
          <Field type="text" name="lastName" placeholder="Last Name" />
          <Field type="email" name="email" placeholder="Email" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;