如何在Ionic React中用useIonModal实现带Promise返回的动态IonModal？

核心思路 #

避开在函数内部使用useIonModal的限制，通过组件状态控制模态框显隐，结合Promise封装用户操作的异步等待逻辑，实现动态模态框的结果返回。

步骤1：封装可复用的确认模态框组件 #

创建一个通用的确认模态框，通过props接收显示状态、内容和关闭回调：

import { IonModal, IonContent, IonButton, IonButtons, IonHeader, IonTitle } from '@ionic/react';

interface ConfirmModalProps {
  isOpen: boolean;
  content: string;
  onClose: (result: boolean) => void;
}

export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, content, onClose }) => {
  return (
    <IonModal isOpen={isOpen} onDidDismiss={() => onClose(false)}>
      <IonHeader>
        <IonTitle>操作确认</IonTitle>
      </IonHeader>
      <IonContent className="ion-padding">
        <p>{content}</p>
        <IonButtons slot="bottom" className="ion-justify-content-between">
          <IonButton onClick={() => onClose(false)}>取消</IonButton>
          <IonButton color="primary" onClick={() => onClose(true)}>确认</IonButton>
        </IonButtons>
      </IonContent>
    </IonModal>
  );
};

步骤2：在主表单模态框中实现动态调用逻辑 #

在现有表单模态框中，通过状态控制确认模态框的显示，同时封装返回Promise的函数来等待用户操作结果：

import { useState } from 'react';
import { IonModal, IonContent, IonButton, IonInput, IonHeader, IonTitle } from '@ionic/react';
import { ConfirmModal } from './ConfirmModal';

interface FormModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const FormModal: React.FC<FormModalProps> = ({ isOpen, onClose }) => {
  const [formValue, setFormValue] = useState('');
  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
  const [confirmContent, setConfirmContent] = useState('');
  let confirmResolve: ((result: boolean) => void) | null = null;

  // 封装返回Promise的模态框调用函数
  const showConfirmModal = (content: string): Promise<boolean> => {
    setConfirmContent(content);
    setConfirmModalOpen(true);
    return new Promise((resolve) => {
      confirmResolve = resolve;
    });
  };

  // 处理模态框关闭，传递用户操作结果
  const handleConfirmClose = (result: boolean) => {
    setConfirmModalOpen(false);
    if (confirmResolve) {
      confirmResolve(result);
      confirmResolve = null;
    }
  };

  // 表单提交逻辑
  const handleSubmit = async () => {
    try {
      // 发起网络请求
      const response = await fetch('your-api-endpoint', {
        method: 'POST',
        body: JSON.stringify({ value: formValue }),
        headers: { 'Content-Type': 'application/json' }
      });
      const apiResult = await response.json();

      // 调用确认模态框，展示请求结果并等待用户操作
      const userConfirmed = await showConfirmModal(`请求结果：${JSON.stringify(apiResult)}`);
      
      // 根据用户操作结果执行后续逻辑
      if (userConfirmed) {
        console.log('用户确认，执行后续操作');
        onClose(); // 关闭主模态框
      } else {
        console.log('用户取消，留在当前表单');
      }
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <>
      <IonModal isOpen={isOpen} onDidDismiss={onClose}>
        <IonHeader>
          <IonTitle>表单提交</IonTitle>
        </IonHeader>
        <IonContent className="ion-padding">
          <IonInput
            value={formValue}
            onIonChange={(e) => setFormValue(e.detail.value || '')}
            placeholder="输入内容"
          />
          <IonButton onClick={handleSubmit} className="ion-margin-top" expand="block">
            提交请求
          </IonButton>
        </IonContent>
      </IonModal>

      {/* 动态确认模态框 */}
      <ConfirmModal
        isOpen={confirmModalOpen}
        content={confirmContent}
        onClose={handleConfirmClose}
      />
    </>
  );
};

关键说明 #

• 通过状态confirmModalOpen控制模态框显隐，替代useIonModal的钩子调用，规避函数内使用钩子的限制。
• showConfirmModal函数返回Promise，将resolve函数暂存，等用户点击按钮时触发resolve，实现异步等待用户操作结果。
• 可根据需求扩展返回值类型（比如返回字符串、对象等），只需修改ConfirmModalProps的回调参数和Promise泛型即可。

内容的提问来源于stack exchange，提问作者BCT