Formik ErrorMessage 第一次不显示答案

【问题标题】：Formik ErrorMessage not displaying for the first timeFormik ErrorMessage 第一次不显示
【发布时间】：2022-08-18 00:20:12
【问题描述】：

我在反应项目中使用 Formik 表单。我在<Formik><Form> 中有以下代码

<Field name=\"zip\" validate={some validation is here}>
       <input {...fieldProps.field}
               id=\"zip\"
               name=\"zip\"
               className=\"form-control\"
               placeholder=\"zip\"
               required={true}
               maxLength={5}
               onKeyDown={(event) => this.onZipChange(event)}/>
</Field>
<ErrorMessage name=\"zip\" render={msg => <div>{msg}</div>} />

呈现表单时，我对输入进行更改，例如，从 zip 中删除一个数字，因此在 props.formProps.errors 中出现错误文本，但没有显示 ErrorMessage。在我单击页面的任何位置后，它会出现，然后它会按预期继续工作：在按下键时，如果 zip 中有任何错误，它会显示 ErrorMessage，如果 zip 有效则隐藏。

问题只是第一次呈现表单时。任何想法，什么会导致问题？

标签： reactjs typescript forms formik

【解决方案1】：

这是预期的行为。 ErrorMessage 仅在满足以下两个条件时显示：

给定字段有错误消息
那个字段touched属性是true

默认情况下，Formik 会在模糊时将 touched 设置为 true。因此，这就是为什么仅在您在输入外部单击时才显示错误消息的原因。

如果你想强制在模糊之前出现错误消息，你可以手动将输入的 touch 属性设置为 true。

例如：

<Formik initialTouched={{zip: true}} />

【讨论】：