Bagaimana untuk menutup kotak modal yang bersarang dalam komponen tersuai lain? Modal saya berada dalam komponen lain. Saya menghadapi masalah menghantar keadaan kepada komponen induk. Anda boleh melihat komponen ibu bapa dan anak di bawah.
Komponen induk:
const ViewNote = ({route, navigation}) => {
const [visible, setVisible] = useState(false);
function visibility(cases) {
setVisible(cases);
console.log(cases);
}
return (
<View style={styles.noteContainer}>
{/* 模态框 */}
<FancyAlert visible={visible} />
<View style={styles.deleteContainer}>
<Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(true)}>
<MaterialIcons style={styles.icon} name='delete' size={40}/>
</Pressable>
</View>
</View>
)
}
export default ViewNote
Subkomponen:
const FancyAlert = ({visible}) => {
const [showAlert, setShowAlert] = useState(false);
return (
<Modal transparent visible={visible}>
<View style={styles.modalContainer}>
<View style={styles.dialogContainer}>
<Text style={[styles.text, {fontSize: 16}]}>您确定要删除此便签吗？</Text>
<View style={styles.buttonContainer}>
<Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(false)}>
<Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text>
</Pressable>
</View>
</View>
</View>
</Modal>
)
}
export default FancyAlert 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Alihkan keadaan ke komponen induk dan lulus fungsi onClose.
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( <View style={styles.noteContainer}> {/* MODAL */} <FancyAlert visible={visible} onClose={() => setVisible(false)} /> <View style={styles.deleteContainer}> <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(true)}> <MaterialIcons style={styles.icon} name='delete' size={40}/> </Pressable> </View> </View> ) } export default ViewNoteconst FancyAlert = ({visible, onClose}) => { return ( <Modal transparent visible={visible} onClose={onClose}> <View style={styles.modalContainer}> <View style={styles.dialogContainer}> <Text style={[styles.text, {fontSize: 16}]}>Are you sure you want to delete this note?</Text> <View style={styles.buttonContainer}> <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={onClose}> <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>Cancel</Text> </Pressable> </View> </View> </View> </Modal> ) } export default FancyAlertAnda hanya perlu melepasi fungsi "keterlihatan" sebagai hak milik FancyAlert. Kod anda sepatutnya kelihatan seperti ini:
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( <View style={styles.noteContainer}> {/* MODAL */} <FancyAlert visible={visible} visibility={visibility} /> <View style={styles.deleteContainer}> <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => visibility(true)}> <MaterialIcons style={styles.icon} name='delete' size={40}/> </Pressable> </View> </View> ) } export default ViewNoteKemudian, komponen FancyAlert hendaklah:
const FancyAlert = ({ visible, visibility }) => { const [showAlert, setShowAlert] = useState(false); return ( <Modal transparent visible={visible}> <View style={styles.modalContainer}> <View style={styles.dialogContainer}> <Text style={[styles.text, {fontSize: 16}]}>你确定要删除这个笔记吗？</Text> <View style={styles.buttonContainer}> <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => visibility(false)}> <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text> </Pressable> </View> </View> </View> </Modal> ) } export default FancyAlertItu sahaja