Claire Réagir Natif TextInput

De travail par le biais de la Redux AddTodo exemple à Réagir Natif. La première AddTodo exemple ci-dessous utilise l'état pour stocker les TextInput valeur et fonctionne très bien.

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

Mais, après quelques de la Redux exemples, le code suivant est beaucoup plus courte et aussi fonctionne sauf que le TextInput value n'est pas effacée après le dépôt de

let AddTodo = ({ dispatch }) => {

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

Est il possible que je peux effacer le InputText value de onSubmitEditing?

OriginalL'auteur Dave Pile | 2017-07-22

javascript react-native

43

Ajouter la réf pour votre TextInput, par exemple:
```
 <TextInput ref={input => { this.textInput = input }} />
```
alors appel this.textInput.clear() pour effacer la valeur d'entrée

Nice. Merci pour cela.
J'ai essayé sur iOS, mais il ne fonctionne pas. TextInput toujours garder l'ancienne valeur
J'ai essayé la version la plus récente de la RN (0.55.4) et il fonctionne toujours sur IOS.
Juste confirmé. .clear() Ne marche pas pour la nouvelle RN (0.55). Vous les gars ont trouvé un travail autour?
Je confirme que .clear() simplement travailler sur Android, iOS ne fonctionne pas. Problème de lien: github.com/facebook/react-native/pull/18278, On peut utiliser ce module comme un travail autour de la question: github.com/agiletechvn/react-native-text-input-enhance

OriginalL'auteur Kawatare267
9

Il donnera la valeur par défaut en texte clair bouton.
```
<TextInput clearButtonMode="always" />
```
clearButtonMode ne fonctionne que sur IOS.

OriginalL'auteur Aseem
4

En fonction des changements et des recommandations après Réagir 16.3, vous devez récupérer la ref à votre constructeur à l'aide de Réagir.createRef:

À la fonction constructeur:
this.myTextInput = React.createRef();

À rendre la fonction:

<TextInput ref={this.myTextInput} />

Et puis vous pouvez appeler

this.myTextInput.current.clear();

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

Cette question est à propos de réagir indigènes, et votre réponse est spécifique à réagir.
Ne fonctionne pas pour réagir natif

OriginalL'auteur Marcio S Galli
3

Je suis en utilisant Natif de la base de
et voici comment j'ai fait travailler
```
constructor(props) {
    super(props);
    this.searchInput = React.createRef();
}

<Input
    placeholder="Search"
    ref={this.searchInput}
/>
```
alors à chaque fois que je veux effacer-je utiliser
```
    this.searchInput.current._root.clear();
```
référence https://github.com/facebook/react-native/issues/18843

trouvé cette erreur: TypeError: _react3.par défaut.createRef n'est pas une fonction. (En _react3.par défaut.createRef()', '_react3.par défaut.createRef " n'est pas défini)
dans réagissent 16 > il n'est pas nécessaire d'ajouter createRef dans le constructeur

OriginalL'auteur Fadi Abo Msalam

cela fonctionne pour moi

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

et
this.attendee.setNativeProps({ text: '' }) //Texte en clair après l'Entrée

OriginalL'auteur 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);
}

J'ai fini par trouver ça trop. C'est le seul qui fonctionne pour moi. Je ne sais pas pourquoi.

OriginalL'auteur Gurbela

Je fais ce code pour la compensation TextInput à Réagir Natif OnSubmitEditing
vous pouvez consulter 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>
)

}

OriginalL'auteur Andreh Abboud

Vous devez vous connecter pour publier un commentaire.