问题标签 [formik]

我正在为我的网站创建一个包含用户联系信息的表单。该站点在客户端使用 ReactJs，而对于后端，我使用的是 NodeJs 和 ExpressJs。

我一直在使用 FormikJs 来创建表单组件。在下面的代码中，我已经创建了表单并将其传递给 Formik 内置的更高阶组件。我发现它对于使用 Yup 进行验证以及快速创建表单的布局和一些基本的表单功能很有用，但我无法真正让它将用户的输入发送到后端。

我正在尝试使用 axios 向“/send”（使用 express 创建的路由）发送 POST 请求，以便我的应用程序的后端部分可以检索联系信息并使用 nodemailer 将其邮寄给自己。

我的问题是没有“const { name, company, phone, email, message} = this.value;” 抛出一个错误，名称、公司、电话、电子邮件和消息未定义。有了这条线，一切都很好，但我仍然无法收到使用表格的电子邮件。

我很确定我已经在并发的帮助下正确地为客户端和服务器站点设置了 package.json 文件，并且我相信表单本身存在问题。我认为应该归咎于 formik 的 handleSubmit 函数，但我不知道如何解决这个问题。这可能是因为我没有正确定义值或没有正确声明 handleSubmit 应该是一个异步函数。有人可以帮忙吗？

我打算在没有 formik 的情况下从头开始创建表单，这样我就可以更好地控制 handleSubmit 函数以及如何定义值。

提前感谢任何帮助的人！如有必要，请随时索取代码片段。

我的密码输入自动填充有问题。我将 HOC 与Formik 一起使用。当我访问该页面时，chrome 会填写我上次登录的电子邮件和密码。这完全没问题。但是，当我尝试编辑密码输入并开始输入时，第一次更改输入值后会重置为记住的密码。恰好有两个更改事件，一个是我的新值，第二个是旧的自动填充值，它会重写我的更改。之后，任何更改都可以，只有一个更改事件，我可以编辑输入值。谁能帮我解决这个问题？

当前平台：NodeJS（最小）、客户端 React w/Redux、Formik、是的。

给定以下示例代码（不包括整个 React 组件代码，因为它与问题无关）：

...如何使用 handleChange 方法？在添加处理复选框更改的代码时，我需要保留原来的那个（来自 Formik 的那个）。有一些组件行为取决于该复选框的选中值。

请注意，我没有将 onChange 属性传递给电子邮件或密码，因为在这些属性上没有额外的代码行为。复选框是具有特殊行为的复选框。

我正在使用 Formik 作为我的 React Native 的登录屏幕。我遇到的问题 Formik 将 Field Touched 设置为 true，即使我在登录请求后明确将其设置为 false。

这是我的表单代码：

（如果你想知道：我不使用 Formik 的isSubmitting值，因为我的登录流程有点复杂，我使用 redux-saga。）

现在，如果handleSubmit被调用并且登录请求已完成，则密码的值将被正确删除。但是我也收到了需要密码的错误消息，即使我明确设置了该字段不被触摸。我究竟做错了什么？

我不知道这是否与它有关，但我还收到以下警告：

这没有任何意义，因为我的 AuthInput 看起来像这样：

我正在使用 react-boostrap-typeahead 库中的 AsyncTypeahead 和 Formik。两个很棒的小图书馆。我的代码的简化版本如下所示

通过使用 AsynchTypeahead 上的 defaultSelected 属性。我可以设置一个默认的初始值。但是我遇到的问题是当我单击按钮来处理休息时，formik 会执行它的操作并将值重置回办公室 1，但是 AsynchTypeahead 没有手动将值传递回其中的方法。所以它不会改变。我看到有一个selected可用的道具，但是当我尝试使用它时它就会爆炸。任何输入都会很好

更新：

是的，选择的是我需要的。我必须添加一个 onInputChange 属性以使父级与输入的内容保持同步。

我无法用我从 redux 获得的值更新 Formik。

这是我的 mapPropsToValues：

我也加入了enableReinitialize: true

我连接它的方式是，total 和 token_quantity 都是我从 redux 获得的值，我需要从商店中填充它们。

我的总计验证模式是：

我的 Field 组件是：

我的代码的工作方式是，当用户单击按钮时，将调度一个动作，然后商店返回totaland quantity。第一次完美运行，值显示在字段中。我遇到的问题是，如果用户随后在字段中输入，无论他们之后是否单击按钮，该值都不会更新。似乎有两个调用setFeildValue，一个是来自 redux 的值，另一个是用户输入的显示值。

有人可以告诉我我做错了什么，因为我无法让它工作而且我已经花了两天时间。

我用 formik 创建了一个表单，以便进行表单验证。我已经使用了 Formik、Form、Field form formik 组件并对其进行了配置：

我有一个自定义组件“FormikSelectInput”：

我的组件正在工作，我可以选择一个选项，但是为什么当我清空选择字段时，formik 与“yup”验证一起显示错误。

当我清除我的选择字段时，我得到一个错误 - '类别必须是一种string类型，但最终值为：null。如果“null”旨在作为空值，请务必将架构标记为.nullable()'

我的代码基于this example。

尝试用 React 测试 Formik。下面是 Formik 组件：

下面是我正在尝试运行的测试（错误在于按钮提交......）

这是我收到的错误：

我似乎找不到错误，我环顾四周但找不到太多...非常感谢任何帮助。我相信我已经看到有人说按钮单击会返回一个承诺，但我不确定......

我有以下组件，它制作一个表单并使用 formik 进行表单验证，并有一个使用 react-places-autocomplete 创建的自定义输入字段，用于输入表单的地址。表单工作正常，但是即使需要地址字段，验证也没有显示，当我将其设为空时，formik 的错误验证没有显示。

以下是组件的代码：

我的代码基于react-places-autocomplete示例，还有这篇文章。

如何使formik验证错误显示？

似乎我可能缺少关于 formik 验证的一些东西，当我清除 GUI 中的地址字段并调试我的 FormikPlacesAutoComplete onChange 处理程序时：

当我检查调试器日志中的表单值时，我看到在第 3,4 行之后： this.props.form.values.address = "AZ, USA" （而不是 "" ）

this.props.form.values.latLng = {lat: 34.0489281, lng: -111.09373110000001} （而不是 {lat: null, lng: null} ）

Formik 在第 3,4 行之后没有反应，也许我没有完全理解 this.props.form.setFieldValue 是如何工作的，我认为 setFieldValue 会触发验证，我会进一步调查。

我有一个电子邮件输入。在该输入的 onBlur 事件中，如果电子邮件存在，我会检查 DB。

如果电子邮件存在，我调用 setFieldError 将字段标记为无效（is-invalid设置了类）

到这里，一切正常。

但是当我单击另一个字段或屏幕的另一部分时，is-invalid该类被删除，is-valid该类再次出现

显然，我需要该类is-invalid存在，直到在电子邮件字段中输入另一个文本。

我的字段组件（只是一个带有一些基本逻辑的输入，如果你需要我在下面编写实现）：

处理电子邮件的回调：

字段组件：

我究竟做错了什么？