web-dev-qa-db-fra.com

Réaction Effacer la saisie de texte native ne supprime pas le texte

Edit: Après un examen approfondi, il semble que cela ne se produise que sous Android 6.0.1. Après avoir essayé plusieurs appareils avec la version 6.0, ce n’était pas un problème.

J'ai un très simple extrait de code de React Native dans lequel je veux effacer du texte dans un TextInput. Cela ressemble un peu à ceci: 

state = {
  v: ""
};

_changeText = v => {
  this.setState({ v });
};

clear = () => {
  this.textInputRef.clear();
}

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={this.clear}>
        <Text> Clear </Text>
      </TouchableOpacity>
      <TextInput
        ref={ref => this.textInputRef = ref}
        value={this.state.v}
        onChangeText={this._changeText}
      />

    </View>
  );
}

Maintenant, je pense que le comportement à adopter pour que cela laisse la saisie de texte active et efface le texte. C'est ce qui se produit. Cependant, dès que je commence à taper quelque chose sur le clavier, le texte que j'ai précédemment effacé réapparaît dans la saisie de texte. De toute évidence, ce type de persistance du texte n'est pas vraiment souhaité.

L'un de vous a-t-il déjà rencontré ce problème? S'agit-il d'un bogue RN ou existe-t-il un moyen d'éviter ce comportement sans avoir à flouter le clavier?

Voici un petit extrait pour clarifier ce que je veux dire: https://snack.expo.io/H1S9b5Mpe .

Si vous commencez à taper, appuyez sur clear, puis continuez à taper, le texte précédemment affiché apparaîtra avant le texte que vous venez de taper.

react-nativereact-native-android
9
Zuzana Chlupackova

Je viens de finir de me débattre avec ça! C'est une douleur intense! 

Ce que j’ai fait pour résoudre ce problème (pour le moment) a été défini sur la propriété autocorrectrice de TextInput sur false, il semble que cela empêche le clavier de "conserver un état".

<TextInput 
    autoCorrect={false} 
    ref={component => this.messageInput = component} 
    value={this.state.message} 
    onChangeText={(text) => this.setState({ message: text })}
    placeholder="Type your message here..." />

J'ai tout essayé et il semble que c'est ce qui a fonctionné. Dans l'attente d'une meilleure solution!

BTW: vous devriez aussi faire this.setState({ message: "" }) pour que la valeur sur l'entrée soit réinitialisée à une chaîne vide.

4
Junior

Il est possible que cela soit lié à une version spécifique du RN ou, comme vous l'avez découvert, à une version spécifique du système d'exploitation. L'extrait de code que vous avez en effet fonctionne parfaitement, vous ne pouvez pas reproduire ce problème sur 6.0.0.

Peut-être qu'au lieu d'utiliser la méthode clear de TextInput, vous pouvez essayer une méthode différente pour effacer le texte, comme suit: this.setState({v: ""});. Cela garantira que l'état est synchronisé et ne conservera pas la valeur précédente.

0
Artal

Ok c'est le code uniquement pour effacer le texte. Vous pouvez ajouter votre propre logique pour la sauvegarder (mabe dans une autre variable d'état)

   state = {
    typedText:'',
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(typedText)=>this.setState({
                    typedText
                })}
                value={this.state.typedText ===" ? null : this.state.typedText}
                onSubmitEditing={()=>{
                    this.setState({
                        typedText:"",
                    })
                }}
            />
        </View>
    )
}
0
9patchcoder

Je fais ce code pour effacer TextInput dans React Native OnSubmitEditing vous pouvez vérifier mon casse-croûte: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Voici le code:

state = {
    searchInput:'',
    clearInput:false
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(searchInput)=>this.setState({
                    searchInput
                })}
                value={!this.state.clearInput ? this.state.searchInput : null}
                onSubmitEditing={()=>{
                    this.setState({
                        clearInput:!this.state.clearInput,
                    })
                }}
            />
        </View>
    )
}
0
Andreh Abboud