在Ionic 7 + React 18中如何设置IonInput自动获取光标焦点？

算力阿峰

2026-7-4

解决Ionic 7 + React 18中IonInput自动聚焦失效问题

原生autofocus属性在Ionic的IonInput组件中常因组件生命周期、DOM初始化时机问题失效，即使是页面唯一输入框也可能出现这种情况，以下是两种可靠解决方法：

方法一：利用Ionic页面生命周期钩子（推荐用于IonPage组件）

Ionic的IonPage提供专属生命周期事件，ionViewDidEnter会在页面完全进入并完成渲染后触发，此时调用输入框的setFocus()方法能确保元素已准备就绪：

import { useRef } from 'react';
import { IonInput, IonPage } from '@ionic/react';

const MyForm = () => {
  const firstNameInput = useRef<IonInput>(null);

  const handlePageEnter = () => {
    firstNameInput.current?.setFocus();
  };

  return (
    <IonPage onIonViewDidEnter={handlePageEnter}>
      <IonInput
        ref={firstNameInput}
        placeholder='First Name'
        value='' 
      />
    </IonPage>
  );
};

export default MyForm;

方法二：结合React useEffect与requestAnimationFrame（适用于非IonPage场景）

如果表单不在IonPage中，可以用requestAnimationFrame推迟聚焦操作，确保IonInput内部DOM已渲染完成：

import { useRef, useEffect } from 'react';
import { IonInput } from '@ionic/react';

const MyForm = () => {
  const firstNameInput = useRef<IonInput>(null);

  useEffect(() => {
    const focusInput = () => {
      firstNameInput.current?.setFocus();
    };
    const rafId = requestAnimationFrame(focusInput);
    return () => cancelAnimationFrame(rafId);
  }, []);

  return (
    <IonInput
      ref={firstNameInput}
      placeholder='First Name'
      value='' 
    />
  );
};

export default MyForm;