如何在（Ionic + React.js App）中自动聚焦 IonInput/OtpInput 字段，我已经尝试了所有解决方案

Posted 2023-03-16

【中文标题】如何在（Ionic + React.js App）中自动聚焦 IonInput/OtpInput 字段，我已经尝试了所有解决方案

【英文标题】：How to autofocus an IonInput/OtpInput field in (Ionic + React.js App), I have already tried all the solutions out there

【发布时间】：2021-12-19 17:17:11

【问题描述】：

我有一个 otp 输入字段，我希望它自动聚焦于初始渲染（使用钩子， 智能和愚蠢的组件） 该字段位于 IonModal 中

import OtpInput from "react-otp-input"; 
import IonInput, IonModal from '@ionic/react';

<IonModal isOpen=true cssClass=classes.someClass showBackdrop=false >
  <OtpInput
    shouldAutoFocus=true
    value=props.otp
    numInputs=6
  />
</IonModal>

我特别想要 OtpInput，但我也尝试过使用 IonInput，它也不能自动对焦

<IonInput
    autofocus=true
    type="number"
    label="Enter OTP"
/>

尝试了自动对焦属性，document.querySelecterAll，无法尝试 document.getElementById 原因 不知何故，ID 没有显示在元素上

我错过了什么？

【参考方案1】：

这应该可行。

<ion-input autofocus="true"></ion-input>

【讨论】：

已经试过了，但不知怎么没用，