IonInput 失去自动对焦

如何解决IonInput 失去自动对焦

我正在尝试使用 autofocus 属性实现一个输入，当我单独使用它时它可以工作，但是当我添加一个 IonButton 时它不起作用。

这是我的代码，我删除了所有不必要的代码以简化问题：

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

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <IonInput autofocus></IonInput>

        <IonButton size="default" className="btn center" type="submit">
          Login
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

为什么会这样？按钮必须是 submit 类型，因为它在表单内

编辑

我也尝试过使用 <input type="submit"> 并且它有效，但它也使用 <input type="button"> 失败，我想使用它。