Ionic React TypeScript项目如何获取IonModal返回的数据并实现await流程

核心问题点 #

• 调用dismiss()方法时未传入要返回的自定义数据，导致onDidDismiss事件无法捕获返回值
• 未给useIonModal添加返回数据的TS类型声明，导致调用dismiss传参时TS报错
• onDidDismiss事件的返回数据存放在e.detail.data字段中，你之前没有从该字段取值

修正后代码 #

const ModalBody = ()=>{
  const [text,setText] = useState<string>("") 
  const Dismiss=(data:{isText:boolean, note:string})=>{handleDismiss(data)} 
  return(
    <div>
      <div className={"ion-text-center ion-padding"}>
        <IonTitle>Enter Your Data Here</IonTitle>
        <IonTextarea 
          rows={10} 
          inputMode="text" 
          spellCheck={true} 
          maxlength={2000} 
          className={"ReasonBox"} 
          onIonChange={(e)=>setText(e.detail.value!)}
        />
      </div>
      <div className={"modalButton"}>
        <IonButton expand={"block"} color="logoText" onClick={()=>Dismiss({isText:true,note:text})}>Save</IonButton>
        <IonButton color="logoText" expand="block" onClick={()=>handleDismiss({isText:false,note:""})}>Cancel</IonButton>
      </div>
    </div>
  )
}

// 给useIonModal添加泛型，第二个泛型参数定义modal返回的数据类型
const [present, dismiss] = useIonModal<{}, {isText:boolean, note:string}>(ModalBody);

// 调整Promise返回值类型为你需要的业务数据类型
const noteModal =():Promise<{isText:boolean, note:string}>=>{
  return new Promise((resolve)=>{
    present({
      cssClass: 'my-css',
      onDidDismiss: (e) =>{
        // 从e.detail.data中取出返回的数据
        const returnData = e.detail.data as {isText:boolean, note:string};
        resolve(returnData)  
      }
    })   
  })
}

const handleDismiss=(data:{isText:boolean, note:string})=>{
  console.log(data.note, data.isText);
  // 调用dismiss时把数据传入
  dismiss(data);  
}

使用方式 #

你可以直接用await调用获取返回数据，符合你的需求：

const handleOpenModal = async () => {
  const modalResult = await noteModal();
  if(modalResult.isText){
    // 拿到用户输入的文本进行后续处理
    const userInput = modalResult.note;
    console.log("用户输入的内容：", userInput);
  }else{
    console.log("用户取消了输入");
  }
}

简化方案（可选） #

如果不想自己封装Promise，也可以直接使用present方法的原生返回值，本身就是Promise，会在modal关闭时resolve返回数据：

const handleOpenModal = async () => {
  const { data } = await present({ cssClass: 'my-css' });
  console.log(data); // 直接拿到返回的自定义数据
}

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