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

React Formik :如何使用自定义onChange和onBlur

React Formik是一个用于处理表单的React库。它提供了一种简单且强大的方式来管理表单状态、验证输入以及处理表单提交等功能。

要使用自定义的onChange和onBlur函数,可以通过Formik的Field组件来实现。Field组件是Formik提供的一个高级组件,用于处理表单字段的状态和事件。

首先,需要在React组件中引入Formik和Field组件:

代码语言:txt
复制
import { Formik, Field } from 'formik';

然后,在Formik组件中定义表单的初始值、验证规则和提交函数等属性。例如:

代码语言:txt
复制
<Formik
  initialValues={{ name: '', email: '' }}
  validate={values => {
    const errors = {};
    // 自定义验证规则
    if (!values.name) {
      errors.name = 'Required';
    }
    if (!values.email) {
      errors.email = 'Required';
    }
    return errors;
  }}
  onSubmit={(values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  }}
>

接下来,在表单中使用Field组件来定义表单字段。可以通过name属性指定字段名,component属性指定表单控件的类型,以及其他属性如onChangeonBlur来自定义事件处理函数。例如:

代码语言:txt
复制
<form onSubmit={handleSubmit}>
  <Field
    name="name"
    type="text"
    component="input"
    onChange={handleChange}
    onBlur={handleBlur}
  />
  <Field
    name="email"
    type="email"
    component="input"
    onChange={handleChange}
    onBlur={handleBlur}
  />
  <button type="submit">Submit</button>
</form>

在上述代码中,handleChangehandleBlur是自定义的事件处理函数,可以在这里进行一些自定义的逻辑操作。

最后,在Formik组件的结束标签后面添加</Formik>即可完成Formik表单的使用。

React Formik的优势在于它提供了简洁而强大的API来处理表单,可以轻松地进行表单验证、状态管理和事件处理等操作。它还提供了丰富的扩展功能和插件,可以满足各种复杂的表单需求。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。产品介绍链接
  • 腾讯云对象存储(COS):提供安全可靠的对象存储服务,适用于存储和管理大规模的非结构化数据。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

    使用 Next.js,你可以使用 React 组件构建用户界面。然后,Next.js 为你的应用程序提供额外的结构、功能优化。 在背后,Next.js 还为您抽象自动配置工具,例如打包、编译等。...UI 层一起使用 API 端点是预先定义的,包括如何从参数生成查询参数将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks,为组件提供数据 isLoading...解析数据、格式化、本地状态、prop 的变化...所有这些在 React 中都是挑战。 我之前使用Formik,但成果并不太理想。对于普通的表单来说,它表现得很好,但在多步骤表单方面有些困难。...那么,我们能不能只需复用组件的交互逻辑,布局样式完全自定义呢?显然,Headless UI 就是干这件事情的。...最后,我们结合设计稿进行 UI 还原,对编写自定义样式,最终就能实现一个全新数字加减器组件了; 动画 React Spring React Spring 是一个用于构建交互式,数据驱动动画 UI 组件的库

    73130

    React 中 getDerivedStateFromProps 的三个场景

    React 16.3 开始,React 废弃了一些 API( componentWillMount, componentWillReceiveProps, and componentWillUpdate...根据应用场景的不同, getDerivedStateFromProps的使用方式也不同。 一、半受控组件 虽然 React 官方不推荐半受控组件,当然从 API 设计维护的角度考虑也是不推荐的。...={this.onChange} onBlur={this.onBlur} /> ); } } 而上层组件更新和组件本身 setState都会触发 getDerivedStateFromProps...={this.onChange} onBlur={this.onBlur} /> ); } } 三、记忆 记忆(memorize)是一种简单常见的优化方式,通过脏检查两次传入的值是不是同一个来记忆结果...通常通过一个简单的帮助函数就可以完成这样的功能: // 当然使用数组或者对象,并传入自定义的比较函数就可以实现记忆多个参数 function memorize(func) { let prev;

    1.9K10

    图形编辑器开发:实现自定义规则输入框组件

    不同类型的输入框有着各自的规则,今天我们来看看怎么去实现这么一个 自定义规则输入框 React 组件。 需求 我们需要做一个自定义规则输入框。...我之前的一篇文章讲述过一个场景,即用户输入 hex 格式的颜色值时,应该如何实现 hex 的校验补正算法,去拿到一个合法的值。 当时只说了校验补正算法。...这篇文章是它的一个补充,即去实现这么一个自定义规则组件,这个组件可以装配不同格式对应的校验补正算法。 组件实现 首先是 props 的设计。...(感觉 onChange 命名会不会更好) interface ICustomRuleInputProps { parser: (newValue: string, preValue: string...={(newVal) => onBlur(newVal)} /> ); }; 结尾 除了数字颜色值输入框,CustomRuleInput 在图形编辑器中用到的地方非常多,逻辑也不复杂,相比普通

    24821

    造一个 react-contenteditable 轮子

    下面就带大家手写一个 react-contenteditable 的轮子吧。...用例 参考 input 元素的受控组件写法,可以想到肯定得有 value onChange 两个 props,使用方法大概像这样: function App() { const [value,...checkUpdate 有人可能会有疑问:一般使用 input 之类输入组件的时候,如果没在 onChange 里 setValue,值都是不会改变的呀。...在这个 Issue 里说到因为没有对 onBlur 进行更新判断,因此,每次改变了值之后,再触发 blur 事件,值都不会改变。那加个 onBlur 的检查是否可行呢?...的组件就完成了,主要实现了: value onChange 的数据流 在 componentDidUpdate 里处理光标总是被放在最前面的问题 在 shouldComponentUpdate 里添加

    1.7K20

    快来使用 React-Hook-Form 搭建强大的React表单

    基于实用简单这两个标准,应用程序最理想的React表单库是 React-hook-form 。...让我们看看如何在你自己的项目中使用 React-hook-form 来为你的React应用程序构建丰富的、有特色的表单。 安装 让我们来讨论一个典型的用例:一个用户注册到我们的应用程序。...如果我们希望用户名只包含大写小写字符,我们可以使用下面的正则表达式,它允许自定义验证: <input name="username" ref={register({ required:...我们可以通过给useForm传递一个对象来改变这一点,我们可以在需要执行验证时设置模式:onBluronChange或onSubmit。...每当用户'失去焦点'或点击远离输入,onBlur将使验证运行。onChange是用户输入时验证,onSubmit是表单提交时验证。

    3.7K21

    React 进阶 - 事件系统

    如 onClick 是由 click 合成,onChange 是由 blur ,change ,focus 等多个事件合成 事件插件机制 React 有一种事件插件机制,如 onClick onChange...,会有不同的事件插件 SimpleEventPlugin ,ChangeEventPlugin 处理 registrationNameModules 记录了 React 事件(如 onBlur与之对应的处理插件的映射...如 onClick ,就会用 SimpleEventPlugin 插件处理,onChange 就会用 ChangeEventPlugin 处理 应用于事件触发阶段,根据不同事件使用不同的插件 const...,如果发现有 React 事件,比如 onChange ,就会找到对应的原生事件数组,逐一绑定 { onBlur: ['blur'], onClick: ['click'], onClickCapture...通过元素可以找到 button 对应的 fiber ,fiber 原生 DOM 之间是如何建立起联系的呢?

    1.2K10

    React 表格组件设计

    React 作为一个流行的前端框架,提供了丰富的工具库来构建高效的表格组件。本文将从浅到深地介绍 React 表格组件的设计,包括常见问题、易错点及如何避免,并通过代码示例来帮助理解这些概念。1....滚动条问题:滚动条的平滑性响应性需要特别关注。2.2 如何避免错误使用成熟的库:使用如 react-window 或 react-virtualized 等成熟的虚拟滚动库。...3.2 如何避免错误使用状态管理库:使用如 useState 或 useReducer 来管理表格状态。合理使用表单验证:使用如 Formik 或 yup 等库来进行表单验证。...数据展示:在小屏幕上,可能需要隐藏某些列或使用其他展示方式。4.2 如何避免错误使用媒体查询:使用 CSS 媒体查询来调整表格的布局。...无论是基本表格、虚拟滚动表格、可编辑表格还是响应式表格,都有其特定的应用场景优化技巧,合理选择使用这些技术可以显著提升用户体验开发效率。

    8210

    React form 表单组件的解决方案

    除此以外,onChange 的时候要立即校验。 提交之前校验全部 体验地址为: React form demo。核心组件代码如下: ?...下面简单解释下各个组件的用途: FormReducer 组件,使用最新的 react hook api 自动管理整个表单的数据。并且创建了一个 context。...各个元素如何排版布局 首先,整个表单可以分为多个表单项。而一个表单项从结构上可能会涉及到 6 个部分:label、前缀、表单元素(或自定义的表单元素)、后缀、说明文字,校验态。大概如下图: ?...该组件有大概如下几个属性: simple:是否使用简化版的 HTML,默认为 false className:自定义 class name:表单项名称,用于表单元素的 name 属性, label 的..." /> {/* 选择框,单选多选,多个元素,自定义组件等使用 children 形式 */} <input

    2.3K10

    92.精读《React PowerPlug 源码》

    label="Choose one" options={["React", "Preact", "Vue"]} value={value} onChange...由于使用对象存储数据结构,操作起来比数组方便太多,已经不需要再解释了。 值得吐槽的是,作者使用了 !...bind 方法与 Active 如出一辙,仅是监听时机变成了 onFocus onBlur。 2.10....实现方式是,在组件内部维护一个 Interval 定时器,实现了组件更新、销毁时的计时器更新、销毁操作,可以认为这种定时器的生命周期绑定了 React 组件的生命周期,不用担心销毁更新的问题。...总结 看完了源码分析,不知道你是更感兴趣使用这个库呢,还是已经跃跃欲试开始造轮子了呢?不论如何,这个库的思想在日常的业务开发中都应该大量实践。

    1.2K30

    精读《React — 5 Things That Might Surprise You》

    使用之前的状态设置状态是不可预测的 状态管理是 React 的基础,虽然useState可能是最常见的钩子,但可能对其实际行为有些不了解。...最重要的是,setState 的连续执行可能会导致 React 的调度算法使用相同的事件处理程序处理多个非常快速的状态更新。...那么在那种情况下,我们如何告诉 react 卸载并立即重新mount 组件?用一个简单的技巧——为我们的组件提供一个key,并改变它的值。...使用这种机制,我们可以欺骗 React 认为一个组件与其之前的自己不同,并导致它重新挂载。...(children) ❝如果你需要在您的组件中强制执行单个子项(我最近注意到 formik 这样做),你可以简单地在您的组件中包含以下行,React 将为你运行检查错误处理: ❞ React.Children.only

    1.2K20

    如何使用 React 构建自定义日期选择器(1)

    您可以在 这里 找到更多关于 date 输入类型浏览器支持的信息。 ? 在本教程中,您将学习如何使用 React 原生 JavaScript日期对象从头构建自定义日期选择器。...React 应用程序的样板代码将使用 create-react-app 包创建。您还需要确保它在您的机器上是全局安装的。...如果您使用 npm >= 5.2,那么您不需要将 create-react-app 作为一个全局依赖项安装——您可以使用 npx 命令。...使用 npx 二进制文件,您无需在计算机上全局安装 create-react-app。...您可以使用以下简单命令创建新的 React 应用程序: npx create-react-app react-datepicker 安装依赖 这个应用程序的依赖尽可能地保持精简。

    6.3K10
    领券