问题标签 [formik-material-ui]

https://codesandbox.io/s/friendly-bohr-mjyhc

这是我表单的代码片段，我创建了一个字段，我想更改它的值 onChange。我没有看到屏幕上的值发生变化，当我在控制台记录 event.target.value 时，我只看到当前字母被前一个字母替换（如果我输入 AB，控制台日志值显示 A 然后它替换到 B)

我有一个如下所示的 formik 字段，我想调用一个使用 event.target.value 的 onChange 函数。当我使用 materialUI 的 TextField 组件时它工作正常，但我使用自定义组件时不会调用该函数。

下面是我的客户文本字段组件的代码

我很确定我弄错了自定义组件，但我不知道我需要添加什么才能使其工作。

CodeSanbox 链接

我正在尝试将 Material UI 的 Autocomplete 与 Formik 一起使用。这是我编写的用于 Formik 的自定义自动完成组件。

这是组件的调用方式

现在我打算做的是：如果我有一个像

我希望自动完成下拉菜单显示男性、女性的选项。但是我希望formik状态从下拉列表中选择后分别保存M，F。目前整个对象都被保存了。

如何才能做到这一点？

我收到的警告是

我附上了一个重现此警告的代码沙箱链接。有人可以解释为什么会出现此警告以及如何摆脱它： https ://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js

我打算使用自动完成，以便它将对象的某个属性存储在表单状态中，并在自动完成选项列表中显示不同的属性。例如，如果选项列表如下：

我打算将gender_name_short 存储在表单状态中，并在下拉列表中显示gender_name_long。我能够做到这一点，这里是我所做的实现的代码和框链接（你还能提出更好的方法吗？） https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App。 js:231-412

现在我的问题是我还希望能够在一个数组中存储多个值，这不适用于这个例子，因为当人不能有多个性别时，但我想将它用于其他用例。那我应该怎么做

当前行为

如果我将“多个”道具添加到自动完成组件，我会收到错误 TypeError Cannot read property 'filter' of undefined

预期行为

将多个值以各自的 short_name_format 存储在数组中，例如）['M','F','O']

重现步骤

https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js:231-412 步骤：

1. 目前，代码可以在没有多个的情况下工作，以演示什么是有效的
2. 在自动完成调用 (prop) 中取消注释 App.js 中的多个
3. 将性别的初始化更改为空列表

我有一个使用 Formik、Yup 和 formik-material-ui 构建的注册表单：

如果我单击表单上的任何位置，它会显示电子邮件错误，这意味着如果用户单击“已经有帐户？登录”，表单显示此错误，而不是重定向到登录：

我尝试添加 updateOnBlur={true} 和 updateOnChanged={true} 无济于事。我也尝试将其添加到电子邮件字段

再次无济于事。

我有一个包含两个值的客户表格。

1. 顾客姓名
2. 客户电子邮件（可以是多个）

除了电子邮件字段之外，我还提供了一个添加按钮，用户可以通过该按钮向表单添加更多电子邮件。现在我想验证已添加的每封电子邮件。如果它被添加，它也是必需的。不允许使用空电子邮件。

问题是我只有一个验证模式来验证电子邮件字段。我如何使用相同的字段来验证多封电子邮件？

即使添加了正确的电子邮件。它仍然给出错误！

请查看沙盒链接以查看代码。代码沙箱链接

我正在尝试弄清楚如何从 react 应用程序中的 formik 表单将表单数据提交到 firestore。

我使用本教程尝试学习如何制作表单，然后尝试将 firebase 表单提交添加到提交处理程序。

表格有：

firestore 配置文件有：

当我尝试这个时，当我按下提交时，我会在控制台中收到警告（没有错误消息，并且表单只是挂起我在表单中输入的数据。

instrument.ts:129 警告：从 submitForm() 类型错误中捕获了未处理的错误： firebase__WEBPACK_IMPORTED_MODULE_2 _.default.firestore.collection 不是函数

请注意，我已经在 firestore 方法中干燥了 .doc.set 和 .doc.add - 两者都不起作用。

我有一个反应应用程序，父组件有一个按钮，单击该按钮会显示一个简单的对话框，其中包含一个文本输入和一个提交按钮。启用严格模式。有两个问题

1. 表单输入设置为在输入中显示初始值（initialValues设置了formik）但未设置
2. 单击按钮时，我在控制台中看到错误；

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

对话框组件来自 Material UI，表单来自 Formik。我在这里创建了一个简单的重现。错误出现在开发工具控制台中。什么会导致该错误，为什么该值未初始化？

这是父组件；

以及上面组件中点击按钮时显示的对话框组件；

我试图弄清楚如何遵循 Formik、Material UI、React 工具的 Autocomplete 字段的文档中的说明。

文档中给出的示例是：

关于在 getOptionLabel 中使用 Movie 的含义，没有给出任何线索。当我尝试使用它时，Movie 带有下划线，就像 renderInput 对象中的 AutocompleteRenderInputParams 一样。我不知道为什么。

我看过这篇文章，它尝试了另一种方法，但我也无法让它发挥作用。

我有一个表格，有两个自动完成字段。目前，它看起来像这样。

当我尝试使用表单时，提交按钮挂起并且控制台日志显示：

Material-UI：getOptionLabel自动完成的方法返回 undefined 而不是 "" 的字符串。

任何人都可以看到如何根据上面链接中发布的文档来使用 formik、material ui 的自动完成功能吗？

我还尝试使用常规选择表单输入。这是表单域：

当我尝试这个时，我在控制台中收到一条警告，上面写着：

此警告没有任何意义 - 表单以正确填充的菜单呈现。

我还收到一条错误消息：

index.js:1 警告：一个组件正在将 undefined 类型的不受控输入更改为受控。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息

关于那个错误，我看过这篇文章，它建议使用值（而不是输入 - 我这样做）并将所有初始值定义为一种类型。对我来说，它们都是字符串，尽管我尝试用空数组替换选择字段。在这两种选择中，控制台中都会返回相同的错误消息。

在这一点上 - 我不在乎我使用哪个自动完成或选择，我只想让其中一个工作。

有趣的是，在这两种情况下（使用选择和自动完成），控制台都会记录以下警告：

但是，只有一个错误实例说：

此错误指向类别选择表单输入。

我还尝试将此代码沙箱中的性别选择表单字段添加到我的表单中，以查看是否可以使其正常工作。当我注释掉上述类别和共享字段，并添加一个默认值为空字符串的性别字段时，表单会加载。

该字段是：

出现性别选择字段，但宽度约为 1 厘米，选项菜单中未填充选项，我无法选择任何内容。但是表单确实会在性别字段中使用空字符串加载到 Firebase。这是进步，但还不足以向前迈进。

相同的代码沙箱显示了一个使用自动完成的字段。我尝试对其进行调整并以如下形式使用它：

当我尝试这样做时，我收到一条错误消息：

TypeError：renderInput 不是函数

此错误消息对我来说毫无意义，因为我没有在表单中的任何地方使用 renderInput。

当我尝试：

我没有收到任何错误，并且可以使用选项详细信息保存表单。但是，这实际上并不能解决自动完成为什么不起作用的问题。这也没有使用链接文档中显示的 Select 字段。所以我不清楚为什么这有效或为什么文档中显示的方法不起作用。

下一次尝试

使用此代码框中的自动完成示例作为指南，我尝试了：

与前面的示例一样，我的代码编辑器在它出现在 getOptionLabel 中的值“any”下划线，它还强调 AutocompleteRenderInputParams。我找不到任何文档来解释表单字段的这些元素的含义或作用。无论如何，我已经导入了 AutocompleteRenderInputParams，如代码沙箱中所示。

我将表单中自动完成字段的初始值设为空数组 - 尽管我注意到代码沙箱在此示例中没有设置初始值。当我尝试删除自动完成的初始值时，我得到的错误与初始值为空数组时生成的错误相同，但我也在控制台中收到一条警告，上面写着：

警告：自动完成的值不是数组，这可能会导致意外行为

当我尝试此代码时，我的控制台会记录以下错误：

TypeError：无法读取未定义的属性“toLowerCase”

Material-UI：getOptionLabel自动完成的方法返回 undefined 而不是 {"value":"open","label":"Open"} 的字符串。