Je travaille sur un projet natif de réact et j'essaie de faire un formulaire de connexion.
Mais j'ai des problèmes pour gérer le changement de texte dans le texte
mon code de formulaire de connexion Quand j'essaie d'écrire quelque chose dans le TextInput, j'ai eu l'erreur: TypeError: non défini n'est pas un objet (évaluer 'event.target.value') .
5 Réponses :
juste essayer avec le code ci-dessous: J'ai mis à jour le onchangetext accessoires
Rien n'a changé
@seiju, mon mauvais, E n'est pas un événement, c'est en fait un texte, nous n'avons donc pas besoin d'utiliser e.target.value , vous pouvez directement Utilisez E ou simplement renommer à INPUTTEXT . Vous pouvez en savoir plus à ce sujet à partir de ici , si vous voulez utiliser e.target.value puis utilisez Onchange accessoires
Qu'entendez-vous par «Vous pouvez utiliser directement E»? Pouvez-vous mettre à jour votre réponse pour expliquer?
@seiju, j'ai mis à jour ma réponse. Jetez un coup d'oeil s'il vous plait.
Si je change mon code comme réponse mon email et mon mot de passe partage la même entrée. J'ai donc changé mon code en Onchange mais maintenant j'ai une autre erreur, s'il vous plaît jeter un oeil à mon édition
La raison en est que vous définissez nouveautext sur i.e. e-mail et mot de passe . Soit créer 2 gestionnaire pour les deux, onemailChange et allowwordchange au lieu de handlechange
@seiju, j'ai aussi mis à jour ma réponse pour votre référence.
OK, cela fonctionne si j'utilise 2 fonctions différentes pour répondre aux textes d'entrée pour le courrier électronique et le mot de passe, mais il n'y a aucun moyen d'utiliser une seule fonction pour les deux? De plus, je ne peux pas utiliser onchangetext = {(email) => {this.setstate ({e-mail})}}} parce que je déclare déjà un courrier électronique et un mot de passe au début de mon rendu.
Ensuite, vous pouvez utiliser comme Onchangetext = {(emailText) => {this.setstate ({email: emailText})}}
Votre donc soit, explicitement lier la méthode p>
ou plus préférablement commencer à utiliser la flèche Syntaxe de fonction p>
sur la manipulation de texte, OnLogin CODE> FUCNTIONNURE ne affichera rien, car vous n'avez pas lié la fonction à votre classe code> code>, donc ceci code> fait simplement des points sur le _global code> objet au lieu de classe code>.
OntextChange CODE> Propriété, qui accepte l'INPTU directement, au lieu de Evénement code> qui est réservé à Onchange code>. Vous avez essentiellement maillé les deux ensemble, bien sûr, cela ne fonctionne pas. P> handleEmailChange = (textVal) => this.setState({
email: textVal
})
<TextInput
// ... other props
onTextChange={this.handleEmailChange}
/>
Le composant TextInput provient de la bibliothèque de papier autochtone.
C'est juste le style. textinput est prédéfini comme exportation par défaut dans réacteur-natif
Vous utilisez réagissant natif et pas réagit DOM. Vous devez modifier votre code de traitement de l'événement actuel de cette < / p> à ceci: Cependant, cela échouera également car @rawrplus mentionné, vous n'avez pas lié la méthode au contexte. Onchangetext Ne passe pas un événement comme premier argument, juste une chaîne simple. En général, le code de traitement des événements que vous voyez des exemples de réaction réguliers qui utilisent le DOM ne transfèrent pas bien ici car ces événements n'existent pas dans leurs homologues indigènes. Ce dans JavaScript est spécial et ne fonctionne pas comme si cela fait dans d'autres langues et fait référence au contexte d'exécution d'une méthode plutôt que le contexte de définition. Cela peut être corrigé en utilisant des fonctions de flèche:
J'utilise Eslint et je ne peux pas utiliser handlechange = (texte) => à cause d'un jeton inattendu '='
Puis mettez à jour Eslint. Ceci est une syntaxe JavaScript valide et est depuis un certain temps maintenant.
qui ne fonctionne pas comme prévu car le premier ( et le second, que vous semblez utiliser ne vous donne que le texte en tant que chaîne Vous n'avez pas à creuser par des couches de propriétés de l'événement pour l'obtenir. Vous devez soit modifier votre fonction de gestionnaire pour vous attendre à un texte ou lié à réacteur-natif a 2 différents onchange fonction: ONCHANGE ), n'est pas structuré comme sur la bande: Onchange plutôt que Onchangetext sur le TextInput .
Vous pouvez utiliser cette méthode:
this.state = {
email: '13119165220',
}
onChangeText={text => this.setState({ email: text })}