首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

基础概念

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

相关优势

  • 简化状态管理:Formik自动处理表单的状态,减少了样板代码。
  • 内置验证:Formik可以与Yup等库结合使用,轻松实现表单验证。
  • 易于集成:Formik可以轻松与其他React组件和库集成。

类型

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

应用场景

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

问题与解决方案

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

  1. 自定义提交函数:在onSubmit函数中,创建一个新的对象,只包含非空字段。
代码语言:txt
复制
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;

参考链接

通过这种方式,你可以确保只有非空字段被提交到服务器,从而减少不必要的数据传输和处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 组件优化

Formik 工具库 Formik 库可以让你在 React 中轻松构建出健壮的 Form 表单程序。...使用时需要先下载: npm install formik --save Formik 库可以与 yup 库一块使用,库的作者也推荐搭配使用,yup 是一个用于验证字段的库,它的用法类似于 React 中的...Formik /> 组件比较复杂,在构建 Formik 表单程序时,Formik 和下面它的几个属性是需要设置的: initialValues 接收一个对象,表示初始化的表单控件的值,对象的键应是表单的...name 值; Formik /> 的 children 部分可以是一个函数,这个函数可以接收到 Formik /> 的 porps; 对 form 表单的小小封装,在 Formik 官网,作者也举例了使用 redux-form 的缺陷: 表单状态本质上是短暂的和局部的,并不需要 redux 对其进行跟踪; 使用 redux 管理状态时,状态更新要派发 action

7.2K20
  • 2023 React 生态系统,以及我的一些吐槽……

    表单处理 Formik 面对现实吧,在 React 中处理表单确实很冗长。更糟糕的是,大多数表单辅助工具做了太多的魔法,并且通常会伴随着显著的性能损耗。...Formik 是一个小型库,可以帮助您解决以下三个最令人讨厌的问题: 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方,Formik 可以让事情井然有序,使得测试、重构和理解您的表单变得轻而易举...由于大约有 30 个独特的表单,很快就明显发现,我们可以通过标准化不仅是输入组件,还有数据在表单中的流动方式来获益。 为什么不使用 Redux-Form?...不是因为我认为 React 在实现表单方面采取了错误的方法,而是因为在使用 React 时,表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...此外,Formik 依赖于表单元素,并且在控制 Redux 存储时存在一些挑战。

    78430

    2020 年你应该知道的 React 库

    例如,gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制,但是其他所有内容都被省略了。...以下是一些流行的解决方案: nivo Victory react-vis Recharts Chart Parts React 中的表单库 在 React 中最流行的表单库是 Formik。...它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单,这两种方法对于 React 应用程序都是有效的解决方案。...建议: Formik React Hook Form React 中的数据获取库 很快,您就必须向远程 API 发出请求,以便在 React 中获取数据。...虽然样式指南只给出建议,但是 linter 在应用程序中强制执行这个建议。例如,你可以要求遵循流行的 Airbnb 样式指南,你的 IED/编辑器会告诉你每一个错误。

    14.4K40

    盘点React开发中不可或缺的工具

    ,比如组件的值传递等等, 而通过react cheatsheet这个网站,你就可以方便地查看它们。...React Dev Tools 在开发原生js的时候,我们经常使用浏览器自带的开发者工具,它足以帮助我们查看和调试js中变量的各种信息,但是对于react框架来说,因为它是采用动态渲染生成的代码结构,...useHooks Hooks是 React 中的新增功能,可让我们在不编写类的情况下使用状态和其他 React 的功能。...Formik 表单处理是网页开发经常会遇到的问题,而Formik是一个可以在React中构建表单的组件。...它是一个小型库,可以让表单的各个状态都能被保存,对于错误的处理和表单的验证,它都提供了非常友好的处理方式,可以说它就是专门为表单处理而诞生的。

    1.7K20

    回望过去,展望未来- 2024 React 生态一览表

    CoinFlip的调用。 在A页面时候,CoinFlip的children代码中只接受flipResults。...Next.js[4]:Next.js,建立在 React 之上的框架,它作为服务器渲染 React 应用的首选选择,并提供灵活的路由选项。 3....Formik Formik[8] 提供一组工具和组件,使管理表单状态、验证和提交变得容易。使用 Formik 的唯一缺点是它没有维护。 2....样式 在之前的浏览器第四种语言-WebAssembly中通过如下的图,介绍了在网页中JS/CSS/HTML/WASM的重要职责。 CSS作为「表现层」,是一个页面锦上添花的存在。...这是一个「无头 UI 库」,可以让我们在各种框架中构建强大的表格和数据网格,如 TS/JS、React、Vue、Solid 和 Svelte,同时保留对标记和样式的控制 12.

    74010

    React入门学习笔记

    React学习笔记 安装 1、通过js文件引入React的js文件 2、npm部署React环境 详情请参考官方文档 组件 Props数据传递 数据可以通过Props在两个组件间传递(父组件流向子组件...JSX语法中,可以在大括号内放置任何有效的JS表达式; import React, { Component } from 'react'; import ReactDOM from 'react-dom...受控组件 在HTML表单元素中,表单元素会自己维护自己的状态而在React中可变状态通常是有state属性控制的,并且只可以使用setState()更新属性;为了适应React的state成为“唯一数据源...”,渲染表单的组件还控制着输入过程中表单发生的操作,被React以这种方式控制取制的表单输入元素称之为“受控组件”。...React文档中也指出React对表单的受控组件处理比较烦杂,而且存在非受控组件;官方给出了推荐[Formik]

    2.5K20

    【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    构造器只在new实例时调用,render在每次状态更新和初始化的时候调用,只要我们通过合法的方式(this.setState API)更新组件的状态,React会自己帮我们调用render方法更新组件...即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。 在非受控组件中,可以使用一个ref来从DOM获得表单值。...非受控组件在底层实现时是在其内部维护了自己的状态state,这样表现出用户输入任何值都能反应到元素上。...在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式...例如:某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。 2、非受控组件使用场景:一般用于无任何动态初始值信息的情况。

    5.1K30

    React19 她来了,她来了,他带着礼物走来了

    在我们的 JSX 中,我们可以删除 的 onSubmit 事件,并使用 action 属性。action 属性的值将是一个「提交数据的方法」,可以在客户端或服务器端提交数据。...'Input 为空' : 'Input有值'} ); } export default ExampleComponent; 之后的写法 在下面的例子中,我们可以看到在...); fn:表单提交或按钮按下时要调用的函数。 initialState:我们希望状态初始值是什么。它可以是任何可序列化的值。在首次调用操作后,此参数将被忽略。 permalink:这是可选的。...在 submitForm 中,我们正在检查表单的值。 prevState:初始状态将为 null,之后它将返回表单的 prevState。...这个方法负责表单提交。这也可以是 async 的。 sendFormData 负责将表单发送到 fakeDelayAction 设置默认状态。

    26110

    2022 年的 React 生态

    这并不是你在日常工作中必须要做的事情,但这是了解底层工具实现原理的一个很好的方式。...CSS 属性的样式对象作为 HTML 样式属性的键/值对,从内联样式和基本的 CSS 开始就可以。...它提供了从验证(一般会集成 yup 和 zod)到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。...这个领域的另一个选择是 React Final Form 。毕竟,如果你已经在使用 React UI组件库了,你还可以查看他们的内置表单解决方案。...建议: React Hook Form 集成 yup 或 zod 进行表单验证 如果已经在使用组件库了,看看内置的表单能不能满足需求 链接: React Hook Form:https://react-hook-form.com

    5.8K20

    React学习笔记(三)—— 组件高级

    二、受控组件与非受控组件 2.1、受控组件 如果一个表单元素的值是由React 来管理的,那么它就是一个受控组件。...它们受控的主要原理是,通过表单元素的 value属性设置表单元素的值,通过表单元素的onChange 事件监听值的变化,并将变化同步到React 组件的 state中。...在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。...2.2.2、默认值 在 React 渲染生命周期时,表单元素上的 value 将会覆盖 DOM 节点中的值。在非受控组件中,你经常希望 React 能赋予组件一个初始值,但是不去控制后续的更新。... 在 React 中, 始终是一个非受控组件,因为它的值只能由用户设置,而不能通过代码控制。

    8.3K20

    你不知道的33个令人惊艳的React开发库

    在今天的文章中,将介绍每个 React 开发人员都应该熟悉的 33 个令人惊叹的 React 库。而且是由其他开发人员经过良好测试和维护的令人惊叹的 React 库。...formlink image.png Formik 是世界上最流行的 React 和 React Native 开源表单库。...email.js image.png 直接从 JavaScript 发送电子邮件。无需服务器代码。专注于重要的事情!...react-virtual image.png 仅在 TS/JS、React、Vue、Solid 和 Svelte 中以 60FPS 的速度虚拟化大量可滚动元素中的可见 DOM 节点,同时保留对标记和样式的...react-query image.png React 的高性能且强大的数据同步。在 React 和 React Native 应用程序中获取、缓存和更新数据,而无需触及任何“全局状态”。

    35320

    【译】73个超棒且可提高生产力的 NPM 包

    配置模块 24.Config[45] 设置存储在应用程序中的配置文件中,可以由环境变量、命令行参数或外部源覆盖和扩展。...模板语言 29.Mustache[50] Mustache 是一种无逻辑的模板语法。它可以用于 HTML,配置文件,源代码等任何东西。它的工作原理是使用 hash 或对象中提供的值在模板中展开标记。...39.Faker[62] 实用的 npm 包,用于在浏览器和 Node.js 中制造大量假数据。 ✅ 校验工具 40.Validator[63] 便捷的字符串验证器,使程序更加健壮的库。...表单和邮件 42.Formik[65] Formik 是 React 和 React Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。...44.Nodemailer[67] Nodemailer 是 Node.js 应用程序的一个模块,允许轻松发送电子邮件。

    5.9K30

    翻译 | 玩转 React 表单 —— 受控组件详解

    受控组件有两个特点: 受控组件提供方法,让我们在每次 onChange 事件发生时控制它们的数据,而不是一次性地获取表单数据(例如用户点提交按钮时)。...“被控制“ 的表单数据保存在 state 中(在本文示例中,是父组件或容器组件的 state)。...如果 input 组件的值不在 selectedOptions 数组中,我们要将值添加进该数组。 如果 input 组件的值在 selectedOptions 数组中,我们要从数组中删除该值。...清除表单子组件中显示的数据很简单,只要把容器的 state (译注:这里是指 state 对象上挂载的各个变量)设置成空数组和空字符串就可以了(如果有数字输入框的话则是将值设置成 0)。...2. handleFormSubmit 为了提交表单数据,我们从 state 中抽取需要提交的属性值,创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API(本文不包含此类内容)。

    11.4K100
    领券