Wie schließe ich ein verschachteltes Modal in einer anderen benutzerdefinierten Komponente?
P粉579008412
P粉579008412 2023-09-11 15:50:11
0
2
542

Wie schließe ich ein in einer anderen benutzerdefinierten Komponente verschachteltes Modal? Mein Modal befindet sich in einer anderen Komponente. Ich habe ein Problem bei der Übergabe des Status an die übergeordnete Komponente. Unten sehen Sie die übergeordneten und untergeordneten Komponenten.

Übergeordnete Komponente:

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

Unterkomponente:

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粉579008412
P粉579008412

Antworte allen(2)
P粉590428357

将状态移动到父组件,并传递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粉563831052

你只需将“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

这样就可以了

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage