如何关闭嵌套在另一个自定义组件中的模态框? 我的模态框在另一个组件中。我遇到了将状态传递给父组件的问题。您可以在下面看到父组件和子组件。
父组件:
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
子组件:
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
P粉5904283572023-09-12 10:49:03
将状态移动到父组件,并传递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 ViewNote
const 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 FancyAlert
P粉5638310522023-09-12 00:45:33
你只需将“visibility”函数作为FancyAlert的属性传递即可。 你的代码应该像这样:
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 ViewNote
然后,FancyAlert组件应该是:
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 FancyAlert
这样就可以了