问题标签 [formik]

我正在以编程方式生成（formik）表单。以下效果很好。

如何在 div 标签内添加以下行，紧跟在 Field 标签之后？或者有没有更好的方法来做到这一点？

我正在尝试将 Formik 与 Material-UI 文本字段一起使用。像这样：

我希望 Formik 负责外观的验证和 Material-UI。我想将 errors.firstName 传递给 TextField 组件，但错误显示不正确。我怎样才能修复它，这样它仍然可以清楚地阅读？我不想编写自己的 TextField 组件。

我想在字段有效时执行自定义函数？

像这样的东西。。
<Field name="postal-code" onValid={...} />

原因是，一旦用户键入有效的邮政编码，我想让获取（GET）从 API 获取地址

我正在使用带有 Formik 的 Draft-js 和yup来验证 Draft EditorState 组件。

我假设我可以通过使用以下 yup 测试来检查 EditorState 是否为空白：

但是，我收到错误：

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.esm.js:491) at formik.esm.js:174

这是formik的错误，还是我使用错误？

其他信息：

在validationSchema 中，我得到以下信息：

但在 EditorState （'body' 字段）的 onChange 处理程序中，它可以正常工作：

我有以下表格：

表单工作正常，显示和所有内容，但我似乎无法让 formik 看到错误。在这个例子中，我有整数值的长度字段。每当我输入一些东西时，验证工作（console.log打印）但对象完全是空的。

即使我在输入中写了非数字，也不会显示任何错误。

有没有人对我可以做些什么来使它工作有什么建议？

介绍：

• 我们在 react 中使用 formik 或 final-form 作为表单管理器
• 我们从 API 获取实体
• 我们需要映射该实体以编辑表单值

情况1：

• 实体具有 ISO 日期属性
• 我们使用一个日期选择器，它的 onChange 返回一个 JS 日期对象

我们应该在表单状态中存储什么：ISO 日期（字符串）或 JS 日期（对象）？

如果我们存储 ISO 日期，则必须在 onChange 处理程序中进行解析。

案例二：

• 实体具有布尔属性
• 我们使用 select 元素，其 onChange 返回一个字符串

我们应该在表单状态中存储什么：真（布尔）或“真”（字符串）？

一般的问题是：在表单状态中存储什么？

使用时可以解析的原始 onChange 值？

或者最好确保日期选择器始终返回 ISO 日期或未定义，布尔字段始终返回布尔或未定义等。

我想有条件地在我的表单中显示错误。

formik 的工作方式是，如果您更改一个字段，所有验证都会运行，并且即使您只更改了一个字段，也会返回所有错误。

我只想在字段被触摸并且我希望字段被触摸 onChange 时才显示错误。对字段的第一次更改应该使它被触及。

目前 formik 在提交时正在触及字段。我怎么能在改变时触摸它？

这是我目前的形式：

我的表格变得非常激烈。大约 20 个输入，包括多个日期选择器、谷歌位置 api、rrule 值等。因为这些输入中很少有可以直接更新而无需经过某种转换。我已经成功地将组件从在生命周期方法中做太多事情的有状态组件转换为（现在使用 formik 来管理值），但我正在尝试确定定义必要辅助函数的最佳方法（例如updatedDateWithTime, formatAddress) 在性能和风格方面，只能想到几个选项。

选项一：函数组件内的函数表达式：

选项 2：作为文件中定义的“全局变量”，在函数之外：

选项 3：作为子组件内部使用的内联箭头函数（即将每个输入分解为其自己的组件并向下传递道具）

在功能组件之外（但在同一个文件中）定义 20 个左右的辅助函数感觉是错误的，但是将它们定义为组件内部的函数表达式似乎更糟，而且这两个选项中的性能更差。就降低 600 行功能组件的复杂性而言，将各个部分分解成子组件感觉像是正确的模式，但是如果子组件最终在他们的渲染中内联定义相同的函数，那实际上不是一样的吗？

我正在尝试在Formik中使用DatePicker。但是当我单击 DatePicker 的日期时，它的表单值不会改变。相反，我收到了这个错误：

未捕获的类型错误：e.persist 不是 Formik._this.handleChange 的函数（formik.es6.js:5960）

我缩短代码，代码如下

我用谷歌搜索了一些文件，https://github.com/jaredpalmer/formik/issues/187和https://github.com/jaredpalmer/formik/issues/86

所以我尝试了下面的方法，但它不起作用。

我正在尝试formik在反应中使用。我找到了这样的代码：

我注意到他InnerForm把MyForm. 并且在InnerForm道具的定义中具有touched, errors, isSubmitting, message未在任何地方定义的元素。我想问一下这两个组件之间的关系以及它们之间的 props 是如何传递的。