0
votes

Erreur d'événement synthétique lorsque vous essayez de taper TextInput

Je construis une page de connexion dans React-Native. Chaque fois que je tape quelque chose dans le champ Nom d'utilisateur, je reçois un avertissement: L'événement synthétique est réutilisé pour des raisons de performance forte> et la valeur de la balise de texte n'est pas modifiée. Le code que j'ai écrit est comme ci-dessous:

export default class LoginScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        }
    }

    login = async () => {
        // const result = await appLogin(this.state.userName, this.state.password);
        console.log(`${this.state.username} ${this.state.password}`);
    };

    render() {
        return <View style={loginStyles.container}>
            <ImageBackground
                source={require('../../../assets/images/login.jpg')}
                style={loginStyles.backgroundImage}>
                <View style={loginStyles.titleContainer}>
                    <Text style={{fontSize: 40, color: 'grey', paddingVertical: 40}}>{this.state.username}</Text>
                </View>
                <View style={loginStyles.nestedContainer}>
                    <TextInput
                        placeholder={'username / email'}
                        style={[style.inputStyle, style.colorBlue]}
                        onChange={(username) => this.setState(username)}
                    />
                    <TextInput
                        placeholder={'password'}
                        textContentType="password"
                        secureTextEntry={true}
                        autoCapitalize="none"
                        autoCorrect={false}
                        style={[style.inputStyle, style.colorBlue]}
                        onChange={(password) => this.setState(password)}
                    />
                    <CustomRoundedButton
                        text={'Login'}
                        buttonStyle={[style.bgPrimary]}
                        onPress={this.login}
                        textStyle={[style.text20, {color: 'white'}]}
                    />
                </View>
            </ImageBackground>
        </View>
    }
};


0 commentaires

3 Réponses :


1
votes

remplacer xxx

avec xxx

et xxx

avec xxx

espère que cela aide!


0 commentaires

0
votes

"textinput's Onchange code> Handler est adopté un objet d'événement natif, que vous avez nommé nom d'utilisateur code> dans la fonction anonyme. Les mises à jour de l'état réagissant sont asynchrones, de sorte que le temps réagi est à jour de la mise à jour, l'événement est parti depuis longtemps (a été replacé dans la piscine d'événement).

Utilisez Onchangetext code> à la place, il reçoit la valeur de texte d'entrée mise à jour. p>

onChangeText={(username) => this.setState(username)}


0 commentaires

0
votes

Votre code: xxx

Vous devez modifier pour cela: xxx


0 commentaires