javascript - How to clear TextInput value in react-native? - Stack Overflow

admin管理员组

文章数量:1410730

I'm asking your help because I'm struggling on the object of this message. I would like to know if not using "state" in react-native is a good practive if you are developing a small application that don't need to transport many data ?

Here is my problem :

export default function ajouterJoueur ({navigation})
{
    let saisie = '';
    /*Récupération de la donnée partieCourante*/
    const partieCourante = DataNavigation.getData('partie');

    return(
    <View style={styles.container}>
      <Text style={styles.titre}>Liste des joueurs ajoutés</Text>
    <View>
      {partieCourante.afficherListeJoueur()}
    </View>
      <View styles={styles.groupeBouton}>
        <TextInput style = {styles.input}
                    placeholder = "Saisir le nom du joueur"
                    onChangeText = {(text) => saisie = text}
                    ></TextInput>
        <Button
            title="Valider"
            onPress={() => ajouterJoueurListe(navigation, saisie, partieCourante)}/>
      </View>
      <View style= {styles.lancementPartie}>
        <Button 
            title="Lancer la partie"
            onPress={() => navigation.navigate('AfficherPartie', {partieCourante})}/>
      </View>
      </View>
    )
}

I want to clear the value of the 'TextInput' when the screen is reload with this piece :

function ajouterJoueurListe(navigation, saisie, partieCourante)
{
    let longueurNomSaisie = saisie.length;
    console.log("Longueur du nom saisie : " + longueurNomSaisie);

    if(longueurNomSaisie >= 1 && longueurNomSaisie < 10)
    {
      console.log(saisie);

      //On crée le nouveau joueur et on initialise son score pour afficher ensuite ses informations.
      let joueurCourant = new Joueur();
      joueurCourant.ajouterNom(saisie);
      joueurCourant.loggerInfoJoueur();

      //On ajoute le joueur à la partie et on affiche les informations
      partieCourante.ajouterJoueur(joueurCourant);
      partieCourante.loggerListeJoueur();

      ajouterJoueur(navigation);
    }
    else
    {
      console.log("La longueur du nom ne convient pas.");
      Alert.alert('Nom invalide', 'Longueur attendue entre 1 et 10 caractères.')
    }

}

I don't understand why when I call 'ajouterJoueur(navigation)' the InputText is still fill with the value that was typed before the reload.

Thanks for your help !

I'm asking your help because I'm struggling on the object of this message. I would like to know if not using "state" in react-native is a good practive if you are developing a small application that don't need to transport many data ?

Here is my problem :

export default function ajouterJoueur ({navigation})
{
    let saisie = '';
    /*Récupération de la donnée partieCourante*/
    const partieCourante = DataNavigation.getData('partie');

    return(
    <View style={styles.container}>
      <Text style={styles.titre}>Liste des joueurs ajoutés</Text>
    <View>
      {partieCourante.afficherListeJoueur()}
    </View>
      <View styles={styles.groupeBouton}>
        <TextInput style = {styles.input}
                    placeholder = "Saisir le nom du joueur"
                    onChangeText = {(text) => saisie = text}
                    ></TextInput>
        <Button
            title="Valider"
            onPress={() => ajouterJoueurListe(navigation, saisie, partieCourante)}/>
      </View>
      <View style= {styles.lancementPartie}>
        <Button 
            title="Lancer la partie"
            onPress={() => navigation.navigate('AfficherPartie', {partieCourante})}/>
      </View>
      </View>
    )
}

I want to clear the value of the 'TextInput' when the screen is reload with this piece :

function ajouterJoueurListe(navigation, saisie, partieCourante)
{
    let longueurNomSaisie = saisie.length;
    console.log("Longueur du nom saisie : " + longueurNomSaisie);

    if(longueurNomSaisie >= 1 && longueurNomSaisie < 10)
    {
      console.log(saisie);

      //On crée le nouveau joueur et on initialise son score pour afficher ensuite ses informations.
      let joueurCourant = new Joueur();
      joueurCourant.ajouterNom(saisie);
      joueurCourant.loggerInfoJoueur();

      //On ajoute le joueur à la partie et on affiche les informations
      partieCourante.ajouterJoueur(joueurCourant);
      partieCourante.loggerListeJoueur();

      ajouterJoueur(navigation);
    }
    else
    {
      console.log("La longueur du nom ne convient pas.");
      Alert.alert('Nom invalide', 'Longueur attendue entre 1 et 10 caractères.')
    }

}

I don't understand why when I call 'ajouterJoueur(navigation)' the InputText is still fill with the value that was typed before the reload.

Thanks for your help !

• javascript
• react-native

Share Improve this question Follow asked May 25, 2020 at 13:16 SalocinskiSalocinski 1111 silver badge44 bronze badges 1

• DId you manage to do it? Did an answer help? Please provide some feedback. – yesIamFaded Commented May 27, 2020 at 8:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

First of all you need to reference your TextInput and then where ever you need it you can call .clear() on it to clear it.

<TextInput ref={input => { this.textInput = input }} />

then if you want to clear it inside a functioncall or something you would need to call:

this.textInput.clear()

TextInput is a controlled ponent, which means the native value will be forced to match this value prop if provided. You just have to pass in a value prop to it.

import React, { Component } from 'react';
import { TextInput, Button } from 'react-native';

export default function UselessTextInput() {
  const [value, onChangeText] = React.useState('Useless Placeholder'); // tracks the value of the text input.

  const clearInput = React.useCallback(()=> onChangeText(''), []); // sets value to empty string
  // you can use the same pattern whenever you want to clear the contents of the text input

  return (
    <>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
      <Button title="clear" onPress={clearInput} />
    </>
  );
}

本文标签： javascriptHow to clear TextInput value in reactnativeStack Overflow