如何在 Formik 表单中的输入字段上设置自动对焦？答案

【问题标题】：How to set autoFocus on input field in Formik form?如何在 Formik 表单中的输入字段上设置自动对焦？
【发布时间】：2020-10-07 00:16:01
【问题描述】：

我正在尝试使用 React 在 Formik 表单中的输入字段上设置自动焦点。这样做的标准方法是什么？

我的代码如下：

                                         <img src="images/barcode-small.png" alt="Barcode Small" />
                                       </td>
                                       <td>
                                         <Field name="barcode1"
                                                type="text"
                                                className="p-inputtext"
                                                autocomplete="off"
                                                style={{ width: 250 }}/>
                                       </td>

我尝试简单地将 autoFocus 属性添加到字段中，但这似乎不起作用。在我的开发工具中，我收到以下错误：

如何检查是什么阻碍了焦点？谢谢

【问题讨论】：

读取错误。它说另一个元素已经被关注。这就是您的自动对焦不起作用的原因。
是的，它必须在 Formik 中构建。好像它的表单提交按钮。你知道如何绕过这个吗？
您必须向我展示文件的整个代码。没有它，我无能为力。
@StiaanWolfaardt：我认为，根据 cmets 和错误，您已将 autoFocus 属性添加到所有 Field 元素，而不仅仅是一个。请粘贴完整代码，以便社区可以更好地帮助您而无需任何猜测????.

标签： reactjs formik

【解决方案1】：

您可以简单地使用 TextInput 来执行此操作，就像我所做的那样只需添加一个属性

<TextInput autoFocus={true} />

看看结果

【讨论】：

TextInput 是 React Native 特有的，我在问题的任何地方都没有看到。 Formik Field 呢？