web-dev-qa-db-fra.com

Effacer React Native TextInput

Utilisation de l'exemple Redux AddTodo dans React Native. Le premier exemple AddTodo ci-dessous utilise state pour stocker la valeur TextInput et fonctionne correctement.

class AddTodo extends React.Component{

    constructor(props){
        super(props);
        this.state = { todoText: "" }; 
    }
    update(e){
        if(this.state.todoText.trim()) this.props.dispatch(addTodo(this.state.todoText)); 
        this.setState({todoText: "" }); 
    }
    render(){
        return(
            <TextInput 
                value = {this.state.todoText}
                onSubmitEditing = { (e)=> { this.update(e); } }
                onChangeText = { (text) => {this.setState({todoText: text}) } } />
        );
    }
}

Cependant, après quelques exemples de Redux, le code suivant est beaucoup plus court et fonctionne également, sauf que la variable TextInputvalue n'est pas effacée après la soumission.

let AddTodo = ({ dispatch }) => {

  return (
      <TextInput 
          onSubmitEditing = { e => { dispatch(addTodo(e.nativeEvent.text)) } } 
      />
  )
}

Existe-t-il un moyen de supprimer la valeur InputText de onSubmitEditing?

javascriptreact-native
21
Dave Pile

Ajoutez une référence à votre TextInput, par exemple:

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

puis appelez this.textInput.clear() pour effacer votre valeur d'entrée

34
Kawatare267

Il donnera le bouton de texte en clair par défaut.

<TextInput clearButtonMode="always" />
9
Aseem

Selon les modifications et les recommandations postérieures à React 16.3 , vous devrez récupérer la référence sur votre constructeur en utilisant React.createRef: 

Au constructeur: this.myTextInput = React.createRef();

A la fonction de rendu: 

<TextInput ref={this.myTextInput} />

Et alors vous pouvez appeler 

this.myTextInput.current.clear();

[1] https://reactjs.org/docs/refs-and-the-dom.html

3
Marcio S Galli

ça marche pour moi

  ref={element => {  
          //Clear text after Input
                this.attendee = element
              }}
              onSubmitEditing={this.handleAddPress}

et this.attendee.setNativeProps({ text: '' }) // Effacer le texte après la saisie

1
Hansa Tharuka

Exemple de code suivant: 

<TextInput 
    onChangeText={(text) => this.onChangeText(text)} 
    ref={component => this._textInput = component}
    onSubmitEditing={() => {
       this.clearText()
     }}
/>

clearText(){
  this._textInput.setNativeProps({ text: ' ' });

  setTimeout(() => {
    this._textInput.setNativeProps({ text: '' });
   },3);
}
0
Gurbela

Je crée ce code pour effacer TextInput dans React Native OnSubmitEditing Vous pouvez vérifier mon goûter: https://snack.expo.io/@andreh111/clear-textinput-onsubititing

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

J'utilise base native Et voici comment je l'ai fait fonctionner

constructor(props) {
    super(props);
    this.searchInput = React.createRef();
}

<Input
    placeholder="Search"
    ref={this.searchInput}
/>

alors chaque fois que je veux effacer j'utilise 

    this.searchInput.current._root.clear();

référence https://github.com/facebook/react-native/issues/18843

0
Fadi Abo Msalam