无法将“touched”设置为true。

Question

我正在尝试创建一个自定义的 Formik <Field />。它是一个 <input type = file />，其 opacity=0，并且根据 values 来设置我的 <Error /> 组件和 <input type = text /> 的样式。 values.photo 是正确的。问题在于 touched 永远不会变为 true，因此我无法显示我的 <Error /> 组件。你能解释一下问题出在哪里吗？(代码链接：https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js)

- Stas

Answer 1

在你的文件输入组件中，只需添加以下内容：

form.setTouched({...form.touched,[field.name]: true });

setTouched接受字段对象作为参数，其中field.name是文件输入的名称。

- adel

---

它的工作不正常，我添加了一个输入来展示它。我之前遇到过这个问题。当我调用setTouched时，它会覆盖所有“touched”对象。 - Stas

如果您有多个输入，请使用对象中的form.touched，并将要检查的字段分配为edited answer。 - adel

啊，你能展示一些代码吗？我在Formic中是新手。 - Stas

我尝试将 object form.touched 保存到本地状态中，然后向该对象添加一个新属性：[field.name]：true，并将其传递给 setTouched。但是似乎在某个时刻 form.touched 变成了未定义的并再次被覆盖。这对我来说非常棘手。 - Stas

你所说的在本地状态中保存表单被触摸的意思是什么？你可以从props访问它。 - adel

Answer 2

当您通过监听onChange事件处理文件输入时，一旦调用该onChange方法，您可以通过调用.markAsTouched()将字段标记为已触摸，以便在验证条件时显示错误。

- Minal Shah

---

你确定 .markAsTouched() 是 Formik 的函数吗？我在文档中找不到它。 - Basel Akasha

那不是Formik的一部分。 - Thremulant