Как очистить значение TextInput в react-native?

Question

Я прошу вашей помощи, потому что я не могу понять цель этого сообщения. Я хотел бы знать, если вы разрабатываете небольшое приложение, которое не требует передачи большого количества данных?

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>
    )
}

Я хочу очистить значение TextInput при перезагрузке экрана с помощью этого фрагмента:

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.')
    }

}

Я не понимаю, почему, когда я вызываю 'ajouterJoueur (navigation)' InputText по-прежнему заполнен значением, которое было введено до перезагрузки.

Спасибо за вашу помощь!

Answer 1

TextInput - это управляемый компонент, что означает, что собственное значение будет принудительно соответствовать этому свойству значения, если оно предоставлено. Вам просто нужно передать ему свойство value.

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} />
    </>
  );
}

Answer 2

Прежде всего вам нужно сослаться на свой TextInput, а затем, где бы он ни был, вы можете вызвать .clear () для его очистки.

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

затем, если вы хотите очистить его внутри functioncall или что-то, что вам нужно вызвать:

this.textInput.clear()