I created a Modal with TextInput to create a "Festival" in my database. To create i open a Modal by click "create". The Modal opens, the TextInput works fine.

But why is this TextInput onChangeText function triggering my Modal onRequestClose function?

import React, { Component } from 'react';
import { Alert, Button, Modal, Text, TextInput, StyleSheet, View } from 'react-native';

export default class EventCreate extends Component {
    state = { eventName: null, eventAdress: null, eventDate: null, eventPasskey: null }

render() {
    const { onSave, toggleModal } = this.props;
    const { eventName, eventAdress, eventDate, eventPasskey } = this.state;

    return (
        <Modal visible={this.props.visible} onRequestClose={console.log('wtf')} animationType={'slide'}>
            <View style={styles.container} >
                <Text>Bezeichnung</Text>
                <TextInput
                    style={styles.input}
                    onChangeText={text => this.setState({ eventName: text })}
                    placeholder="Bezeichnung"
                />
                <Button
                    onPress={() => {
                        Alert.alert(
                            "Event speichern?",
                            "Moechtest Du das Event"   " "   eventName   " "   "wirklich speichern?",
                            [
                                {
                                    text: "Abbruch",
                                    onPress: () => console.log("Eingabe vom Benutzer abgebrochen"),
                                    style: "cancel"
                                },
                                {
                                    text: "Speichern", onPress: function () {
                                        onSave(eventName, eventAdress, eventDate, eventPasskey);
                                        toggleModal();
                                    }
                                }
                            ]
                        );

                    }}
                    title="SAVE" />
            </View>
        </Modal>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center'
    },
    input: {
        height: 40,
        width: 250,
        margin: 12,
        borderWidth: 1,
        padding: 10,
    },
});

CodePudding user response：

Try this way

onRequestClose={() => console.log('wtf')}