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

Question

我正在尝试使用 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 属性添加到字段中，但这似乎不起作用。 在我的开发工具中，我收到以下错误：

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

Answer 1

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

<TextInput autoFocus={true} /> 

看看结果

Answer 2

您可以将 useEffect 与 document.getElementByName 结合使用。 方法如下；

使用空括号只运行一次 useEffect：

  useEffect(() => {
    document.getElementsByName("name of your formik element")[0].focus();

    // following is optional
    return () => {
      formik.resetForm();
    }
  }, []);

Answer 3

对于那些未来的人：

我在这个问题中使用了 React class 组件。 我设法通过添加一个处理焦点的方法来解决这个问题。 通过在 DOM 中通过 ID 获取元素。

focusChange(nextField) {
 if(document.getElementById(nextField) === null){
   return;
 }
 document.getElementById(nextField).focus();

}

然后在 class 的渲染方法中，我检查了一个关键事件。 keycode 13(enter) 检查是为了防止提交表单。

const onKeyDown = (keyEvent) => {
     if ((keyEvent.charCode || keyEvent.keyCode) === 13) {
       this.focusChange(this.state.nextBarcode);
       keyEvent.preventDefault();
       keyEvent.keyCode = 9;
     }
   }

我将该方法添加到我的 Formik 表单中：

<Form onKeyDown={onKeyDown}>

来自 PrimeReact 的实际输入字段如下所示：

<InputText
      className="p-inputtext"
      id='barcode4'
      onChange={(e) => this.setState({barcode4: e.target.value, nextBarcode: 'barcode5'})}
      value={this.state.barcode4}
      style={{ width: 250 }} />

所以我的解决方案是document.getElementById("myID").focus();