问题标签 [formik]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
14484 浏览

reactjs - 在组件之外访问 Formik 的值 | 反应

一些信息

我在我的项目中使用 Formik,我的设置如下所示:

MenuModal的父级在哪里。该组件负责返回 Formik 表单,但我在它的 parent 中调用提交,稍后通过 React 的 refs运行提交函数。凌乱?是的!MenuEditMenuEditFormMenuEditFormMenuModalMenuEdit

我的问题

现在我正在尝试使用状态和回调函数将 FormiksvaluesMenuEditFormto获取MenuEdit。但由于我没有使用 Formiks own onSubmit

我的values将是未定义的,我无法让我的提交功能通过。

所以我想知道如何访问我values的 inMenuEditForm以便以后可以将其传递给MenuEdit并完成我的提交功能。

谢谢阅读。

0 投票
0 回答
2501 浏览

reactjs - Formik + React-semantic-ui

所以这是我的代码:


一切正常。下拉值正在保存到数据库。但是表格太滞后了。更改输入字段中的一个符号需要几秒钟的时间。在控制台中,每当我更改一些输入(不是下拉菜单)时,我都可以看到很多这样的消息:

请帮帮我,伙计们!生无可恋!

0 投票
1 回答
19259 浏览

reactjs - Formik 表单在编辑时不更新字段

我一直在尝试用 React 重写我的初学者表单以使用 Formik。我已经达到了正在呈现表单的状态,但是,由于某种原因,我无法更新这些字段。很明显,我在某个地方犯了一个错误,阻止了 Formik 更新状态。我错过了什么?

一个示例表单组件:

表单在另一个组件中初始化(充当网站的页面模板);

我假设 onChange 事件处理程序由 Formik 处理,如果我不想做特殊的事情,我不需要为此提供任何东西。我在这里想念什么?

谢谢!

0 投票
1 回答
430 浏览

reactjs - 使用 react-beautiful-dnd 获取 DragHandle 错误

我正在使用 react-beautiful-dnd 版本 8.0.5(最新)并尝试呈现可重组的列表,但我不断收到此错误:

我已经从这个例子中复制了部分代码。我目前使用 react-redux、Formik 的 HOC 和 react-virtualized-select。当我将代码复制到代码框示例时,它至少会呈现(我猜是有问题)。有人有什么主意吗?如果需要,我可以提供更多代码。

0 投票
4 回答
9382 浏览

javascript - 是的,条件验证

如何实现条件,例如 1 个字段的值应始终大于另一个字段的值。

这是我的架构

我想检查 value2 是否始终为 > value。如何在 when 条件下访问 value2 的值?

0 投票
1 回答
9009 浏览

javascript - 使用带有formik的react-select时无法读取未定义的属性“类型”

我正在使用 react-select 和 formik 构建一个带有自动填充文本框的表单。

它抛出一个错误Cannot read property 'type' of undefined 在此处输入图像描述

如何解决这个问题并在formik中处理react-select?

0 投票
1 回答
3423 浏览

javascript - 使用 Yup 验证多个输入字段

我目前正在使用 Formik 并使用 Yup 进行验证。

我希望验证 2 个日期、一个开始日期和一个结束日期。

起初这很简单,我有两个输入字段,start_date并且end_date. 这两个都只是接受以下格式的文本输入,MM-YYYY. 验证已经足够好了,它首先将该字符串转换为日期,使用moment(value, "MM-YYYY").

由此,我们进行了以下测试:

test1只需检查 是否MM-YYYY是有效日期。test2检查 thestart_date是否在end_date. 为了简单起见,end_date测试是相同的,除了有任何额外的测试。额外测试检查end_date是否等于或小于当前日期。

这就是我目前拥有的,但是我想要的是 4 个输入框:

  • start_date_month(01, 02, 03...)
  • start_date_year(2000 年、2001 年……)
  • end_date_month
  • end_date_year

这很容易做到,但测试会有点不同,我不确定我们是否可以start_date_month一起测试start_date_year。本质上,我需要将它们连接起来以再次-创建MM-YYYY

有什么想法可以用 Yup 做到这一点吗?

0 投票
1 回答
3664 浏览

javascript - 如何在formik中将选择字段添加到FieldArray

我遵循以下代码:

但是对于文本输入字段。我想替换select并做类似的事情。

代替:

至:

当我在一个组件中选择值时,我添加了 3 个组件,它对所有组件都有影响。

我在这里做错了什么?

0 投票
0 回答
2105 浏览

react-native - object 对象:在 Formik 值中未定义

我正在创建一个 formik 表单以将一些输入上传到 firebase

当我提交表单时,我的 formik 值对象中有一个未知的对象对象变量,当我尝试将新数据添加到我的 firestore 时导致错误(对象对象:未定义)

以前有人遇到过这个问题吗?你如何解决它?

下面是我的表单代码

谢谢

0 投票
1 回答
1371 浏览

reactjs - 如何保存 Formik 中每个切换字段的值?


我正在使用 Formik 创建一个具有下拉和提交按钮的表单。单击下拉列表中的任何项目后,我会呈现一个切换选项。我面临的问题是,如果我有两个切换,第一个是关闭的,第二个是打开的。现在,如果我删除第一个,第二个的值也会更改为第一个的值。我如何解决它。任何帮助表示赞赏。这是我的代码的链接 -
https://codesandbox.io/s/kw3w0xlqjv