为何添加IonButton后IonInput的autofocus属性失效？

我之前也碰到过一模一样的问题——单独用IonInput的autofocus完全正常，但一加type="submit"的IonButton，输入框就再也得不到自动焦点了。这本质上是因为Ionic的组件初始化逻辑里，submit类型的按钮会在页面加载时抢占焦点优先级，干扰了原生autofocus的生效，哪怕你用原生<input type="button">也会有同样的问题，因为按钮的焦点优先级默认比输入框高。

下面给你几个亲测有效的解决方案：

方案一：用React的useRef手动控制焦点（最可靠） #

直接通过React的useRef获取IonInput的实例，然后在组件挂载完成后手动调用Ionic提供的setFocus()方法。因为IonInput是Web Component，需要用异步的方式确保组件完全初始化：

import { IonContent, IonPage, IonInput, IonButton } from '@ionic/react';
import React, { useRef, useEffect } from 'react';

const Home: React.FC = () => {
  // 创建输入框的引用
  const inputRef = useRef<HTMLIonInputElement>(null);

  useEffect(() => {
    const focusInput = async () => {
      // 等待组件初始化完成后设置焦点
      await inputRef.current?.setFocus();
    };
    // 页面挂载后执行焦点设置
    focusInput();
  }, []);

  return (
    <IonPage>
      <IonContent fullscreen>
        {/* 将引用绑定到IonInput上 */}
        <IonInput ref={inputRef}></IonInput>
        <IonButton size="default" className="btn center" type="submit">
          Login
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

这个方法完全绕过了原生autofocus的优先级问题，手动控制焦点时机，不管按钮怎么设置都能确保输入框获取焦点。

方案二：给IonButton添加tabindex="-1" #

通过给按钮设置tabIndex="-1"，让它不参与页面的焦点顺序，这样就不会和输入框抢焦点了：

<IonButton size="default" className="btn center" type="submit" tabIndex="-1">
  Login
</IonButton>

这个方法更简单，适合不需要按钮参与键盘焦点导航的场景。设置后按钮依然可以正常点击提交，但不会自动抢占初始焦点，原生的autofocus就能正常生效了。

方案三：调整组件渲染顺序（可选） #

如果你不想写额外的逻辑，可以尝试把IonInput放在IonButton之后渲染，不过这个方法稳定性不高，因为Ionic的组件渲染顺序有时候会受框架生命周期影响，不如前两种方法可靠。

内容的提问来源于stack exchange，提问作者Abdel P.