如何以编程方式关闭离子选择

Question

在我的ionic react应用程序中，我在表单中使用IonSelect。当下拉菜单打开时，我需要在硬件后退按钮事件监听器调用中以编程方式关闭IonSelect下拉菜单。下面是代码

export const SingleSelection: React.FC = () => { 
const [gender, setGender] = useState<string>();

useEffect(() => {

document.addEventListener('ionBackButton', (ev: any) => {
ev.detail.register(1000, async (processNextHandler: any) => {
console.log('Handler B was called!');

processNextHandler();
});
});
return () => {
console.log("use effect return");
}
}, [])
return (
<IonPage>
<IonContent>
<IonItem>
<IonLabel>Gender</IonLabel>
<IonSelect value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
<IonSelectOption value="female">Female</IonSelectOption>
<IonSelectOption value="male">Male</IonSelectOption>
</IonSelect>
</IonItem>
</IonContent>
</IonPage>   
);
};

更新:(解决):这是我更新完整的代码与模态。在硬件返回按钮事件侦听器方法中，首先关闭离子选择(如果它保持打开状态)，然后关闭模态

const ModalExample: React.FC = () => {
const [showModal, setShowModal] = useState(false);
const [gender, setGender] = useState<string>();
useEffect(() => {
document.addEventListener('ionBackButton', (ev: any) => {
ev.detail.register(1000, async (processNextHandler: any) => {
console.log('Handler B was called!');
try {
console.log("close ion select");
const alert = await alertController.getTop();
if (alert) {
alert.dismiss();
return;
}
console.log("close modal")
const element = await modalController.getTop();
if (element) {
//element.dismiss();
setShowModal(false)
return;
}
} catch (error) {
console.log(error);
}
processNextHandler();
});
});
return () => {
console.log("use effect return");
}
}, [])
return (
<IonContent>
<IonModal isOpen={showModal} cssClass='my-custom-class'>
<p>This is modal content</p>
<IonItem>
<IonLabel>Gender</IonLabel>
<IonSelect value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
<IonSelectOption value="female">Female</IonSelectOption>
<IonSelectOption value="male">Male</IonSelectOption>
</IonSelect>
</IonItem>
<IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>
<IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
</IonContent>
);
};

Answer 1

我有办法了。使用alertControllerIonSelect下拉菜单可以编程关闭，

import { alertController } from "@ionic/core";
.....
useEffect(() => {
document.addEventListener('ionBackButton', (ev: any) => {
ev.detail.register(1005, async (processNextHandler: any) => {
console.log('Handler D was called!');
const alert = await alertController.getTop();
console.log(alert);
if (alert) {
alert.dismiss();
return;
}
processNextHandler();
});
});
return () => {
console.log("use effect return");
}
}, [])

Answer 2

虽然按下硬件后退按钮会自动关闭IonSelect下拉菜单。如果这对你不起作用，这里有一个使用useRef钩子的解决方案:

export const SingleSelection: React.FC = () => { 
const [gender, setGender] = useState<string>();
const selectRef = useRef<any>(null);
useEffect(() => {

document.addEventListener('ionBackButton', (ev: any) => {
ev.preventDefault(); // TO PREVENT THE CLOSING OF MODAL
ev.detail.register(1000, async (processNextHandler: any) => {
console.log('Handler B was called!');
selectRef.current.close() // SEE HERE

// HERE YOU CAN NOW CLOSE THE MODAL
processNextHandler();
});
});
return () => {
console.log("use effect return");
}
}, [])
return (
...
<IonSelect ref={(ref: any) => selectRef.current = ref} value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
<IonSelectOption value="female">Female</IonSelectOption>
<IonSelectOption value="male">Male</IonSelectOption>
</IonSelect>
....

);
};

Answer 3

如果你使用界面弹出

constructor(private popoverController: PopoverController) {}
closeSelect(){
if (this.popoverController && await this.popoverController.getTop()) {
await this.popoverController.dismiss();
}
}