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>
}
};
3 Réponses :
remplacer avec p> et p> avec p> espère que cela aide! p> p>
"textinput's Utilisez 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).
Onchangetext code>
à la place, il reçoit la valeur de texte d'entrée mise à jour. p> onChangeText={(username) => this.setState(username)}
Votre code: Vous devez modifier pour cela: p>