使用 useIonModal 显示模态时自动聚焦于 IonInput

Question

我一直在查看 https://ionicframework.com/docs/developing/managing-focus#overlays 并且在使用使用

useIonModal

创建的模态时我还没有让它工作，或者我正在这样做错了？

在我的父组件中我有

  const modalUsernameInput = useRef<HTMLIonInputElement>();
  const [presentAddUserModal, dismissAddUserModal] = useIonModal(
    UserViewModelModal,
    {
      dismiss: (data, role) => dismissAddUserModal(data, role),
      usernameInput: modalUsernameInput
    } as UserViewModelModalProps
  );

我展示模态的部分是

<IonFabButton
            onClick={() => {
              presentAddUserModal({
                cssClass: "popup-modal",
                onDidPresent: (ev) => {
                  console.log(modalUsernameInput.current);
                  modalUsernameInput.current?.focus();
                }
              });
            }}
          >
            <IonIcon icon={add} />
          </IonFabButton>

然后

UserViewModelModal

看起来像

export interface UserViewModelModalProps extends ModalProps<AddUserViewModel> {
  usernameInput?: React.RefObject<HTMLIonInputElement>;
}

export const UserViewModelModal: React.FC<UserViewModelModalProps> = (props) => {
  return (
    <div className="wrapper ion-padding">
      <h1>Add User</h1>
      <IonInput
        label="Username"
        labelPlacement="fixed"
        ref={props.usernameInput}
      />
      <IonInput label="Password" labelPlacement="fixed" type="password" />
    </div>
  );
};

为什么它不关注输入？我做错了什么？预先感谢

Answer 1

我的错，它应该是

setFocus()

而不是

focus()

。