6
votes

TextInput avec valeur ne change pas la valeur

Dans mon application React-native, j'ai une API à partir de laquelle je récupère des données et je configure les données dans mes valeurs d'entrée, l'utilisateur devrait pouvoir modifier ces entrées et mettre à jour, mais lorsque j'essaie de taper dans l'entrée il ne tapera rien et la valeur reste telle quelle, voici le code TextInput:

<TextInput
   placeholder= Email
   value={this.state.info.email}
   onChangeText={email => this.setState({ email })}/>

javascript react-native textinput

0 commentaires

4 Réponses :

0
votes

Je pense que vous avez une erreur dans votre fonction de gestionnaire. Lorsque vous avez appelé setState, vous avez mis à jour this.state.email mais dans votre valeur d'entrée de texte, vous avez utilisé this.state.info.email , vous avez également écrit l'objet d'événement dans le email, au lieu de la nouvelle valeur du champ ( event.target.value ). Vous devriez utiliser quelque chose comme ça.

onChangeHandler = event => {
  const newEmail = event.target.value
  this.setState({ info: {email: newEmail})}
}

<TextInput
  placeholder= Email
  value={this.state.info.email}
  onChangeText={this.onChangeHandler.bind(this)} />

0 commentaires

1
votes

Vous devez d'abord déclarer l'état, puis l'appliquer à la valeur TextInput.

<TextInput
   placeholder= Email
   value={this.state.email}
   onChangeText={value=> this.setState({ email: value})}/>

et remplir TextInput pour la première fois avec la valeur API que vous devez ajouter

XXX

et votre TextInput sera comme ci-dessous:

componentDidMount(){
  this.setState({email: this.props.info.email});
}

J'espère que cela fonctionne ..

1 commentaires

onChangeText = {value => this.setState ({email: value})} ici, vous obtiendrez une valeur incorrecte car l'objet événement est passé à la fonction de gestionnaire. Le code correct est event => this.setState ({email: event.target.value})

6
votes

Comme je ne pense pas que l'e-mail soit le seul accessoire de votre state.info , je vous recommande d'utiliser correctement setState () , afin de ne modifier que ce champ . Selon l'immuabilité et ES6, quelque chose comme:

<TextInput
  placeholder="Email"
  value={this.state.info.email}
  onChangeText={text =>
    this.setState(state => ({
      info: {
        ...state.info,
        email: text
    }))
  }
/>;

En savoir plus sur la gestion de TextInput ici

0 commentaires

0
votes

J'avais le même problème jusqu'à ce que je change la value prop en defaultValue comme ceci:

<TextInput
   style={styles.inputBox}
   onChangeText={title => this.setState({ title })}
   defaultValue={this.state.title}
   placeholder='Title'
/>

J'ai trouvé cette information sur Documentation de React ici

0 commentaires