问题标签 [formik-material-ui]

我创建了一个用户注册表单并通过使用formik和yup库向它添加验证。但问题是onSubmit里面的方法<Formik>不起作用。你能告诉我我的代码有什么问题吗？onSubmit它应该在方法内传递输入值

该saveUser方法是将输入值存储在mysql数据库表中

我正在尝试在数组中添加一个项目，并使用onChange()下拉列表中的 访问它们，但它没有被保存在下面是我的来源：

},[setSelectedValue, selectedValue]);

然后我访问onChange()下拉列表，如下所示：

我正在使用 Formik 并在下面进行了以下设置，我希望能够在用户按下“取消”按钮时重置表单。返回表单时，所有表单值都应重置为initialValues空值。

我有以下取消按钮的代码：

在表单字段中输入一些文本并按下取消按钮后，该按钮将我引导回主页，然后我返回表单并注意到我的文本仍处于表单中的状态并且没有重置。

任何人都可以请协助我所缺少的。

我正在尝试使用 typescript react 创建一个地址表单，如果我创建了永久地址字段和通信地址字段。并且有可能这两个地址可以相同，在这种情况下如何编写复选框功能来解决这个问题。如果选中复选框，则永久地址的任一字段将变为禁用或消失。

我正在尝试使用 React 和 Formik 进行验证。我想实现最大数字仅为 3，最大范围应仅为 100，最小值应为 1。

我如何在 React js 中实现这一点。

我正在开发一个反应项目，其中将有一个反应材料 ui 表组件。在表格内部（每页 10 个记录/行），每行中的最后一个元素是 Material UI MoreVert Icon

预期行为：当我单击第一行的 MoreVert 图标时，它应该显示选项菜单，当我单击其他地方时，菜单应该关闭。

当前行为：当我单击第一行（或页面中的任何行）中的 MoreVert 图标时，它会向我显示选项，但是当我单击页面中的其他位置时，当前行上显示的菜单正在关闭并且在同时在第 10 行（页面的最后一行）的 MoreVert 图标上自动发生单击事件，并且第 10 行的菜单正在打开。

谁能帮助我实现预期的行为

我的代码：

我的菜单选项代码

我使用 material-ui (v5) 和 formik 的自动完成字段来生成我的表单。在这个表单上，我有一些定义为常量的列表。

我使用 api 来获取此列表的默认值。此 api 仅返回选项的“代码”，但不返回其标签。

我的参数 isOptionEqualToValue 很好，因为即使输入中没有显示该值，它在列表中也被很好地选择了。

您可以看到输入文本字段为空：

但是如果我展开列表，我可以看到我的“ms”值已被选中：

我应该怎么做才能使输入文本包含默认值？

我正在使用useFormik钩子将 Formik 与我的表单一起使用。在我设置的配置中validate，onSubmit和initialValues键。我想清理我的输入，比如修剪和转义。对于电子邮件，我也想使用normalizeEmailfrom validator.js。我无法找到将清理代码放在哪里 - 我是把它放在 formik 配置中还是放在验证函数中。我意识到我可以setFieldValue从 formik 使用，但我不想更改formik.handleChange功能，因为它处理表单状态并且不想搞砸。

这是代码：

我目前正在我的网站上开发移动签名功能。我要处理三个组件：Form.js（父级，使用 Formik 作为表单）、Admin.js（Form 的子级）和 Signature.js（Admin 的子级）。

当您以纵向模式到达此页面（表单的管理部分）时，它会呈现一条消息以将您的手机横向切换为签名。当您转为横向时，会弹出一个按钮：“单击此处签名”。当您单击它时，会弹出一个带有签名画布 (react-signature-canvas) 的全屏 Material-ui 对话框。您签名，然后单击“保存并关闭”以关闭全屏对话框，然后单击“保存签名”以将签名保存到您的个人资料中。

使用断点，我发现当您在对话框中单击“保存并关闭”以关闭它时，状态正在正确地与签名一起保存。但是，当您在表单的“管理”部分单击“保存签名”时，状态已重置为其初始状态为 null。

我相信解决方案是使用 forwardRef 钩子，但问题是我看到的大多数示例都是将 ref 从一个组件转发到另一个组件，我认为我需要让它按照我的组件的结构方式通过一个附加组件（从签名 --> 到管理员 --> 到表单）。我需要将 SignatureCanvas (react-signature-canvas) 的引用从 Signature.js 获取到 Form.js。以下是每个文件的相关信息：

签名.js

管理员.js

表单.js

我研究并认为也许我需要使用 useCallback 钩子而不是转发 ref 或根本使用 refs 但不确定如果这是正确的解决方案如何实现。我还尝试在表单组件中设置状态并将其传递给管理员，然后传递给签名，但没有任何运气。任何帮助将不胜感激！

我正在尝试创建要在 Formik 表单中使用的 DatePicker 组件。

传递给该字段的初始值是日期，但是在用户键入或从选取器中选择日期之前，我不想显示任何值。

我怎样才能做到这一点？

零件：

表格示例：