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

如何使此Formik表单与自定义按钮一起工作?我无法将值获取到handleSubmit

Formik是一个用于构建表单的React库,它提供了一种简化表单处理的方式。要使Formik表单与自定义按钮一起工作,你可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了Formik库。你可以使用以下命令进行安装:
代码语言:txt
复制
npm install formik
  1. 在你的代码中导入Formik和相关的表单组件:
代码语言:txt
复制
import { Formik, Form, Field, ErrorMessage } from 'formik';
  1. 创建一个包含表单字段和验证规则的初始表单值对象。例如:
代码语言:txt
复制
const initialValues = {
  name: '',
  email: '',
  password: ''
};
  1. 创建一个验证函数,用于验证表单字段的值。例如:
代码语言:txt
复制
const validate = (values) => {
  const errors = {};

  if (!values.name) {
    errors.name = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  if (!values.password) {
    errors.password = 'Required';
  }

  return errors;
};
  1. 创建一个处理表单提交的函数。在这个函数中,你可以获取表单字段的值并执行相应的操作。例如:
代码语言:txt
复制
const handleSubmit = (values) => {
  console.log(values);
  // 执行其他操作
};
  1. 在你的组件中使用Formik组件包裹表单,并将上述创建的函数和对象传递给Formik组件的相应属性。例如:
代码语言:txt
复制
<Formik
  initialValues={initialValues}
  validate={validate}
  onSubmit={handleSubmit}
>
  <Form>
    <div>
      <label htmlFor="name">Name</label>
      <Field type="text" id="name" name="name" />
      <ErrorMessage name="name" component="div" />
    </div>

    <div>
      <label htmlFor="email">Email</label>
      <Field type="email" id="email" name="email" />
      <ErrorMessage name="email" component="div" />
    </div>

    <div>
      <label htmlFor="password">Password</label>
      <Field type="password" id="password" name="password" />
      <ErrorMessage name="password" component="div" />
    </div>

    <button type="submit">Submit</button>
  </Form>
</Formik>

在上述代码中,<Formik>组件包裹了整个表单,initialValues属性设置了初始表单值,validate属性设置了验证函数,onSubmit属性设置了提交处理函数。<Form>组件定义了表单的结构,<Field>组件定义了表单字段,<ErrorMessage>组件用于显示验证错误信息。

当用户点击提交按钮时,Formik会自动执行验证函数并调用提交处理函数。你可以在提交处理函数中获取表单字段的值,并执行相应的操作。

关于Formik的更多信息和用法,请参考腾讯云的相关产品和产品介绍链接地址。

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

相关·内容

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

它们通常还需要对该数据进行更新、更新发送到服务器,并使客户端上的缓存数据服务器上的数据保持同步。...UI 无关的,RTK Query 的功能可以任何 UI 层一起使用 API 端点是预先定义的,包括如何从参数生成查询参数和响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的...Formik 是一个小型库,可以帮助您解决以下三个最令人讨厌的问题: 放入和取出表单状态 验证和错误消息 处理表单提交 通过所有这些放在一个地方,Formik 可以让事情井然有序,使得测试、重构和理解您的表单变得轻而易举...(@jaredpalmer)在 @eonwhite 一起构建一个大型内部管理仪表板时编写了 Formik。...如果你需要做任何特殊的操作,表单进行交互就变得非常痛苦! 因此,React 做了它最擅长的事情,实现的工作交给了我们。事实上,这正是喜欢 React 的原因!

55630

redux-form的学习笔记二--实现表单的同步验证

(注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,将用redux-form...在点击清空按钮时,调用reset()方法清空所有输入框中的内容 首先附上form.js的代码:(这份展示一共两份代码:index.js和form.js,index.js的内容请看上一篇博客) import...handleSubmit等自带的属性以props的形式传入SyncValidationForm中,使他“增强”了,是不是和connect(...)(...)很相似呢?...props ..... } 你就在SyncValidationForm中取到了这些属性 关于handleSubmit,pristine,reset和submitting的作用这里简单介绍一下...(即上文提到的保存表单数据的对象),dispatch和props(传递给自定义表单组件的属性) pristine是一个布尔型的,如果表单初始化后尚未输入,为true,否则为false,当你向表单中第一个输入框中输入的时候

1.8K50

React 中非受控和受控的组件

我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。...被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。 让我们看以下示例以更好地理解概念。...单击提交按钮时,其记录在控制台中。... 不受控制组件的限制 无即时字段验证 无法有条件地禁用提交按钮 无法强制执行输入格式 单个数据没有多个输入 无动态输入 小结 总体而言,非受控组件可以在必要时使用或比受控组件更有效...若要使用非受控制的组件,可以使用 ref 直接访问 DOM 。对于受控组件,我们表单数据存储在 React 组件的状态属性中。

2.3K20

高级前端常考react面试题指南_2023-05-19

经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包函数组件一起使用。...通过在 shouldComponentUpdate方法中返回 false, React让当前组件及其所有子组件保持当前组件状态相同。...如果HTML中的表单元素( input、 select、 textarea等)添加到组件中,当用户表单发生交互时,就涉及表单数据存储问题。...根据表单数据的存储位置,组件分成约東性组件和非约東性组件。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储在组件的状态中,而是存储在表单元素中,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它的

1.7K31

React面试八股文(第一期)

主要解决的问题: 单纯的Redux只是一个状态机,是没有UI呈现的,react- redux作用是Redux的状态机和React的UI呈现绑定在一起,当你dispatch action改变state的时候...受控组件更新state的流程:可以通过初始state中设置表单的默认每当表单发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后的状态,并更新组件的state一旦通过setState...方法更新state,就会触发视图的重新渲染,完成表单组件的更新受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单。...当调用setState时,React render 是如何工作的?咱们可以"render"分为两个步骤:虚拟 DOM 渲染:当render方法被调用时,它返回一个新的组件的虚拟 DOM 结构。

3K30

20道高频React面试题(附答案)

经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包函数组件一起使用。...页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。...(2)使用useState时候,使用push,pop,splice等直接更改数组对象的坑使用push直接更改数组无法取到,应该采用析构方式,但是在class里面不会有这个问题。...方法更新state,就会触发视图的重新渲染,完成表单组件的更新受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单

1.7K10

微信小程序-如何获取用户表单控件中的

,然后提交给后端处理 那么在小程序当中有哪些方式可以获取到表单中的呢,又怎么通过非表单提交的方式获取用户输入框中的呢 换言之,若提交按钮在form之外,又如何实现表单的提交呢 在小程序中有两种方式可以获取表单...important; } 在上面的示例代码中,你会发现当有多个radio,多个checkbox时,它会被包裹在radio-group,checkbox-group中,不然是无法取到控件中的具体数值的...拿到表单中各个表单组件的,代码量少,简单 缺点: 处于form表单之外的其他表单控件无法拿到的,button按钮页必须要在form内,并且写法固定 下面介绍一种非表单提交方式,也就是不依赖form...,同样也可以获取到表单组件的各个数值 这种应用场景在小程序中是很常见的,表单提交数据,不一定就非得是button按钮的方式,只要能拿到表单组件中的,就达到目的了的 非表单方式获取表单组件的 下面是实例效果...-- 此处并非用的button按钮,照样可以提交表单数据 --> 提交</

6.7K11

40道ReactJS 面试问题及答案

它旨在使 React 应用程序更快、更流畅,特别是对于具有大量更新的复杂应用程序。 React Fiber 的工作原理是协调过程分解为更小的工作单元,称为纤维。...输入由 DOM 管理,通常在需要时使用 ref 来访问输入。 当您想要将 React 非 React 代码或库集成,或者当您需要优化大型表单的性能时,不受控制的组件非常有用。...受控组件:表单数据由 React 组件(而不是 DOM)处理,方法是输入存储在状态中,并在输入更改时更新状态。 输入由 React 状态控制,输入的更改通过事件处理程序进行处理,从而更新状态。...最后,我们断言使用正确的表单数据调用了handleSubmit 函数。 快照测试:快照测试是一种捕获组件输出“快照”并将其先前存储的快照进行比较的方法。 使用 Jest 创建和维护组件输出的快照。...复合组件:复合组件是一种模式,其中一组组件一起工作以形成更高级别的组件。组中的每个组件都维护自己的状态和行为,但它们一起工作以实现共同的目标。示例包括选项卡式界面、折叠式菜单和表单控件。

18510

测试需求平台11-产品管理交互Acro必要组件掌握

系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版,拥抱Vue3.0前端框架替换成字节最新开源的arco.design,其中约60%重构和20%新增内容,定位为从 0-1手把手实现简单的测试平台开发教程...组成的表单,在提交时候获取表单 例子代码参考如下: 为表单主包包裹, :mode绑定组对象 为子项,filed(数据项必填)表单元素在数据对象中的path..., label标签的文本 @submit 表单提交时触发事件,参数data 等同于mode绑定form集合 更多API https://arco.design/vue/component/form#API...https://arco.design/vue/component/button#API 按钮类型 组件是最基本的组件之一,几乎页面交互的事件动作都要通过按钮完成,在Arco样式除了默认按钮,还包含但不限于如下类型...在只设置图标时,按钮的宽高相等 样式按钮 可以指定大小、形状和状态、线性、文本等 组合按钮 通过 组件使按钮以组合方式出现。

20620

【译】开始学习React - 概览和演示教程

安装 有几种安装React的方法,向你展示两种,以便你更好地了解它地工作方式。...Props是现有数据传递到React组件的有效方法,但是该组件无法更改属性 - 它们是只读的。在下一节中,我们学习如何使用state来进一步控制React中的数据处理。...太棒了,现在我们有了删除按钮,我们可以通过删除字符来修改状态。 ? 删除了Mac数据。 现在,你应该了解如何初始化状态以及如何修改状态了。...) } 最后,我们添加一个提交按钮以提交表单。...如果你不熟悉什么是API或者如何连接API,建议你阅读下如何使用JavaScript连接API这篇文章,它将引导你了解什么是API以及如何将它们原始的JavaScript一起使用。

11.1K20

react学习

按钮表单,对话框,甚至整个屏幕的内容:在React应用程序中,这些通常都会以组件的形式表示。 提取组件 组件拆分为更小的组件。...表单 在React里,HTML表单元素的工作方式和其他的DOM元素有些不同,这是因为表单元素通常会保持一些内部的state。...type="submit" value="提交" /> 表单具有默认的HTML表单行为,即在用户提交表单后浏览到新页面。...我们可以把两者结合起来,使React的state成为“唯一数据源”。渲染表单的React组件还控制着用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫“受控组件”。...当你将之前的代码库转换为React或React应用程序飞React库集成时,这可能会令人厌烦。在这些情况下,你可能希望使用非受控组件,这是实现输入表单的另一种方式。

4.3K20

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

Register还将把每个传递给一个函数,该函数将在提交表单时被调用,下面我们讨论这个问题。 为了让register正常工作,我们需要为每个输入提供一个适当的name属性。...这样做的原因是,当我们提交表单时,我们获得单个对象上的所有输入。每个对象的属性都将根据我们指定的输入名称属性进行命名。...如何禁用表单的formState 我们可以从useForm钩子中得到的最后一个是formState。 它为我们提供了重要的信息,比如何时输入了某些内容,以及何时提交了表单。...因此,如果你想禁用表单按钮,以确保表单没有提交过多次,我们可以禁用设置为formstate.issubmitted。 提交表单时,它会被禁用直到验证完成运行onSubmit函数。...总结 希望本文向您展示了如何在React应用程序中更容易地创建功能性表单。 还有很多与react-hook形式相关的特性没有在这里介绍。点击这里,官方文档应该涵盖你能想到的任何用例。

3.5K21

美团前端一面必会react面试题4

拿到这两个之后,我们就可以通过一些对比逻辑来决定是否有 re-render(重渲染)的必要了。如果该函数的返回为 false,则生命周期终止,反之继续;注意:方法仅作为性能优化的方式而存在。...方法更新state,就会触发视图的重新渲染,完成表单组件的更新受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单。...React render 函数返回的虚拟 DOM 树老的进行比较,从而确定 DOM 要不要更新、怎么更新。...组件上的数据无关的加载,也可以在constructor里做,但constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错

3K30

React学习(3)——列表、键值表单

全文共分为3篇内容: JSX语法React组件 状态、事件动态渲染 列表、键值表单     扩展:webpack搭建React开发环境 列表组件的键值     首先让我们看看在JavaScript...作为键值: const todoItems = todos.map((todo) => {todo.text} );     在某些情况下无法取到合理的...    因为表单元素都保持着一些内部状态,所以HTML的表单React的表单工作方式有一些区别。...type="submit" value="Submit" />     在用户提交表单时,浏览器默认会跳转到新的页面,当然在默认情况下React中的表单也是这样工作的。...我们使用“受控组件”2者合并,负责渲染表单的React组件还需要控制用户在渲染完毕后的各种输入操作。

1.3K30

2021前端react面试题汇总

同时,这也是很多人 React 状态管理库结合使用的原因之一。但是,这往往会引入了很多抽象概念,需要你在不同的文件之间来回切换,使得复用变得更加困难。...受控组件更新state的流程: 可以通过初始state中设置表单的默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单。...当 ref 属性被用于一个自定义的类组件时,ref 对象接收该组件已挂载的实例作为他的 current。 当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9.

1.9K20

2021前端react面试题汇总

同时,这也是很多人 React 状态管理库结合使用的原因之一。但是,这往往会引入了很多抽象概念,需要你在不同的文件之间来回切换,使得复用变得更加困难。...受控组件更新state的流程: 可以通过初始state中设置表单的默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单。...当 ref 属性被用于一个自定义的类组件时,ref 对象接收该组件已挂载的实例作为他的 current。 当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9.

2.3K00
领券