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

使用React & Formik,我如何从<Form>组件外部触发Formik onSubmit?

在使用React和Formik时,如果你想从<Form>组件外部触发onSubmit事件,可以通过以下步骤实现:

基础概念

  1. Formik: 是一个用于React的库,旨在简化表单的状态管理和验证。
  2. onSubmit: 是Formik提供的一个事件处理函数,当表单提交时触发。

相关优势

  • 状态管理: Formik简化了表单状态的管理,避免了手动处理表单状态的复杂性。
  • 验证: Formik内置了验证机制,可以方便地进行表单验证。

类型

  • 函数组件: 使用React Hooks和Formik的函数组件方式。
  • 类组件: 使用React类组件和Formik的方式。

应用场景

  • 当你需要从外部按钮或其他组件触发表单提交时。
  • 当你需要在特定条件下自动提交表单时。

实现方法

你可以通过引用(ref)来访问Formik的实例,然后调用其submitForm方法来触发提交。以下是一个示例:

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

const MyForm = () => {
  const formikRef = useRef();

  const handleExternalSubmit = () => {
    if (formikRef.current) {
      formikRef.current.submitForm();
    }
  };

  return (
    <div>
      <Formik
        initialValues={{ email: '', password: '' }}
        onSubmit={(values) => {
          console.log(values);
        }}
        innerRef={formikRef}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field type="email" name="email" />
            <Field type="password" name="password" />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
      <button onClick={handleExternalSubmit}>Submit from outside</button>
    </div>
  );
};

export default MyForm;

解释

  1. useRef: 使用React的useRef钩子来创建一个引用,指向Formik实例。
  2. innerRef: 将这个引用传递给Formik的innerRef属性,这样你就可以通过这个引用来访问Formik实例。
  3. handleExternalSubmit: 这是一个外部触发提交的处理函数,通过调用formikRef.current.submitForm()来触发Formik的onSubmit事件。

参考链接

通过这种方式,你可以从<Form>组件外部触发Formik的onSubmit事件。

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

相关·内容

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

    技术角度来看,React Query 很可能: 帮助你应用程序中删除许多复杂和误解的代码,并用几行 React Query 逻辑替代。...API 端点是预先定义的,包括如何参数生成查询参数和将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks,为组件提供数据和 isLoading 字段,...并在组件挂载和卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项,可以通过 WebSocket 消息流式传输缓存更新,以在获取初始数据后使用 我们有 OpenAPI 和...> )} ); export default Basic; React Hook Form 作者自述:React 最大的抱怨就是表单。...解析数据、格式化、本地状态、prop 的变化...所有这些在 React 中都是挑战。 之前使用Formik,但成果并不太理想。对于普通的表单来说,它表现得很好,但在多步骤表单方面有些困难。

    72830

    2020 年你应该知道的 React

    当我 Angular 切换到 React绝对经历了它作为 React 的优势。 只有通过 React,您才能使用函数组件和 props 构建组件驱动的用户界面。...它提供了验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单,这两种方法对于 React 应用程序都是有效的解决方案。...建议: Formik React Hook Form React 中的数据获取库 很快,您就必须向远程 API 发出请求,以便在 React 中获取数据。...React Router 身份验证: Firebase 数据库: Firebase Ui 库: none 或 UI 组件库 表单库: none 或 FormikReact Hook Form 测试库...Node.js 服务 Ui 库: UI 组件库或者您自己的 UI 组件 表单库: none 或者 Formik 或者 React Hook Form 测试库: Jest with React Testing

    14.4K40

    通过三个实例掌握如何使用 TypeScript 泛型创建可重用的 React 组件

    市面上已经有很多关于 TypeScript 泛型的文章和教程,所以本文将聚焦于如何React 组件使用泛型,让你的组件变得更加灵活和可重用。...使用泛型组件渲染任务列表 最后,我们来看看如何用泛型组件渲染一个任务列表。...尽管在实际项目中我们通常会使用Formikreact-hook-form 这样的库来处理表单,但为了演示泛型的强大之处,我们将从头开始创建一个简单的表单组件。...) { e.preventDefault() onSubmit(values) } return ( <form onSubmit={...通过使用泛型,你可以创建适用于任何数据类型的组件,这在处理各种数据类型的实际应用中尤为有用。 希望这篇文章能让你更好地理解如何React 组件使用泛型,并让你的组件变得更加灵活和可重用。

    20510

    推荐十一个React Hook库

    这意味着可以以最小的努力轻松地将任何组件的任何状态提升到上下文。如果您想在多个位置使用相同的状态,或者为多个组件提供相同的状态,这很有用。该名称来自合并上下文和状态的文字游戏。...在React的最初版本发布几个月后,它就随钩而上了。它通过现有connect()方法提供了HOC(高阶组件)模式的替代方法。...hook form React hook form是一个与Formik和Redux表单相似的表单校验hook库,但是更好!.../react-hook-form/react-hook-form 使用案例: import React from "react"; import { useForm } from "react-hook-form...该库很小,易于使用,但如果您有足够的创造力,它可能会很强大。 它还提供了悬停效果的延迟。支持TypeScript。文档没有那么详细,但是它将向您展示如何正确地使用它。

    4.1K30

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

    「如果大家对这些概念熟悉,可以直接忽略」 同时,由于阅读文章的群体有很多,所以有些知识点可能「视之若珍宝,尔视只如草芥,弃之如敝履」。以下知识点,请「酌情使用」。...Formik Formik[8] 提供一组工具和组件,使管理表单状态、验证和提交变得容易。使用 Formik 的唯一缺点是它没有维护。 2....它侧重于编写模仿用户交互的测试,帮助我们确保组件用户的角度行为如预期。该库鼓励测试 React 组件的最佳实践。 3....React Hook Form DevTools[35] - 对于那些使用 React Hook Form 的人,有可用于帮助调试表单行为的 DevTools。...: https://formik.org/docs/tutorial [9] React Hook Form: https://www.react-hook-form.com/get-started/

    69210

    一个简洁、强大、可扩展的前端项目架构是什么样的?

    大家好,卡颂。 React技术栈的一大优势在于 —— 社区繁荣,你业务中需要实现的功能基本都能找到对应的开源库。 但繁荣也有不好的一面 —— 要实现同样的功能,有太多选择,到底选哪个?...而前者包含一个完整的React全栈论坛项目: 用户登录页面 作者通过这个项目举例,展示了与「项目架构」相关的13个方面的内容,比如: 文件目录该如何组织 工程化配置有什么推荐 写业务组件时该怎么规范...文件目录如何组织 项目推荐如下目录形式: src | +-- assets # 静态资源 | +-- components # 公共组件 | +-- config...应用状态 与应用交互相关的状态,比如「打开弹窗」、「通知」、「改变黑夜模式」等,应该遵循「将状态尽可能靠近使用他的组件」的原则,不要什么状态都定义为「全局状态」。...表单状态 表单数据需要区分「受控」与「非受控」,表单本身还有很多逻辑需要处理(比如「表单校验」),所以也推荐用专门的库处理这部分状态,比如: React Hook Form Formik React

    1.1K30

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

    在这里,整理了一些最喜欢的 NPM 包的列表。也将它们分类,因此信息更加结构化,更易于浏览。 当然,你不必安装和学习所有这些工具。在大多数情况下,每个类别中挑选一个就足够了。...前端框架 1.React[3] React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理,从而允许你刷新组件而不刷新整个页面。...它们的 API 使用类似,如果你使用过MomentJS,则已经知道如何使用大多数 DayJS。...表单和邮件 42.Formik[65] FormikReactReact Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。...往期优秀文章推荐 【webpack 性能优化】编译速度 50S 到 7S[99] 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧[100] 【Vue进阶】——如何实现组件属性透传?

    5.9K30

    分享 73 个让你事半功倍的 NPM 包

    在这里,整理了一些最喜欢的 NPM 包的列表。还对它们进行了分类,因此信息更加结构化并且更易于浏览。 当然,我们不必全部安装和学习它们。在大多数情况下,每个类别中挑选一个两个就足够了。...前端框架 1、React 地址:https://www.npmjs.com/package/react React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理,允许我们在不刷新整个页面的情况下刷新组件...通常与 React-dom 和 React-router-dom 一起使用。...使用类似的 API - 如果您使用过 MomentJS,那肯定已经知道如何使用大部分 DayJS。...表格和电子邮件 42、Formik 地址:https://www.npmjs.com/package/formik Formik 是一个流行的 ReactReact Native 开源表单库。

    5.3K20

    2022 年的 React 生态

    无论它是 dropdown、radio button 还是 checkbox ,你最终都应该知道如何创建这些UI组件组件。...它提供了验证(一般会集成 yup 和 zod)到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。...这个领域的另一个选择是 React Final Form 。毕竟,如果你已经在使用 React UI组件库了,你还可以查看他们的内置表单解决方案。...建议: React Hook Form 集成 yup 或 zod 进行表单验证 如果已经在使用组件库了,看看内置的表单能不能满足需求 链接: React Hook Form:https://react-hook-form.com.../ Formik:https://github.com/jaredpalmer/ React Final Form:https://final-form.org/react ---- 类型检查 React

    5.8K20

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

    在这里,整理了一些最喜欢的 NPM 包的列表。也将它们分类,因此信息更加结构化,更易于浏览。 当然,你不必安装和学习所有这些工具。在大多数情况下,每个类别中挑选一个就足够了。...前端框架 1.React[3] React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理,从而允许你刷新组件而不刷新整个页面。...通常与 React-dom[4] 和 React-router-dom[5] 一起使用。...它们的 API 使用类似,如果你使用过MomentJS,则已经知道如何使用大多数 DayJS。...表单和邮件 42.Formik[65] FormikReactReact Native 的一个流行开源表单库。它具有易于使用、声明性和适应性的特点。

    4.5K20

    如何测试 React 异步组件

    前言 本文承接上文 如何测试驱动开发 React 组件?,这次将继续使用 @testing-library/react 来测试我们的 React 应用,并简要简要说明如何测试异步组件。...异步组件的测试内容 我们知道异步请求主要用于服务器上获取数据,这个异步请求可能是主动触发的,也可能是(鼠标)事件响应,本文主要包含 2 方面内容: 如何测试在 componentDidMount 生命周期中发出的异步请求...为了保证是一个纯组件,将提交方法onSubmit作为一个 props 传入,接下来我们实现下组件代码 import React from "react"; function Login({ onSubmit...> ); } export default Login; 为了方便理解我们这边没有使用其他三方库,若在生产环境中,推荐使用 react-hook-form 测试提交 接下来测试下 onSubmit...,那么如何测试 react 路由 ?

    3.3K50

    浅谈表单受控性及结合Hooks应用

    在本文中将介绍在 React 中受控和非受控表单是如何使用的,以及现代化使用 hooks 来管理 form 状态。...2 受控和非受控表单差异 2.1 受控表单的特点和使用场景 受控表单是指表单元素的值受 React 组件的 state 或 props 控制。...到 ant4 的差异为例 antd3 中form 组件设计思想: 使用HOC(高阶组件)包裹 form 表单,HOC 组件中的 state 存储所有的控件 value 值,定义设置值和获取值的方法 存在缺陷...利用 useRef 的特性,在调用 useForm 的组件中,创建到销毁等各种生命周期,无论组件渲染多少次,FormStore 只会实例化一次,在每个 Field 中定义 forceUpdate()...不同于 rc-field-form使用的受控表单来做表单状态管理,react-hook-form 使用React 的 useRef 和 useReducer 来处理表单数据的状态,而不是使用

    31810

    2021前端react高频面试题汇总

    如何配置 React-Router 实现路由切换 (1)使用 组件 路由匹配是通过比较 的 path 属性和当前地址的 pathname 来实现的。... 使用react-router接管了其默认的链接跳转行为,区别于传统的页面跳转, 的“跳转”行为只会触发相匹配的对应的页面内容更新,而不会刷新整个页面。...经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。...8:如何创建 refs 主题: React 难度: ⭐⭐ Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。... ) 复制代码 上述代码如何使用 React.createElement 来实现: const element = React.createElement( 'h1', {className

    5K20
    领券