首页  >  问答  >  正文

如何在另一个自定义组件中关闭嵌套的模态框?

如何关闭嵌套在另一个自定义组件中的模态框? 我的模态框在另一个组件中。我遇到了将状态传递给父组件的问题。您可以在下面看到父组件和子组件。

父组件:

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粉579008412P粉579008412428 天前532

全部回复(2)我来回复

  • P粉590428357

    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

    回复
    0
  • P粉563831052

    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

    这样就可以了

    回复
    0
  • 取消回复