Domanda Clear React Native TextInput


Lavorando con l'esempio AddTodo di Redux in React Native. Il primo esempio AddTodo in basso utilizza lo stato per memorizzare il valore TextInput e funziona correttamente.

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

Tuttavia, seguendo alcuni esempi di Redux, il seguente codice è molto più breve e funziona anche se non il TextInput  value non viene cancellato dopo l'invio

let AddTodo = ({ dispatch }) => {

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

C'è un modo per cancellare il valore di InputText da onSubmitEditing?


10
2017-07-22 01:38


origine


risposte:


Aggiungi riferimento a TextInput, ad esempio:

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

quindi chiama this.textInput.clear() per cancellare il tuo valore di input


24
2017-07-22 02:55



Fornirà il pulsante di testo predefinito predefinito.

<TextInput clearButtonMode="always" />

4
2018-06-14 16:33



Secondo i cambiamenti e le raccomandazioni dopo Reagire 16.3, dovrai recuperare il ref dal tuo costruttore usando React.createRef:

Alla funzione del costruttore: this.myTextInput = React.createRef();

Alla funzione di rendering:

<TextInput ref={this.myTextInput} />

E poi puoi chiamare

this.myTextInput.current.clear();

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


1
2017-07-20 18:10



questo funziona per me

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

e this.attendee.setNativeProps({ text: '' }) // Cancella il testo dopo l'input


0
2018-06-17 07:10



Faccio questo codice per cancellare TextInput in React Native OnSubmitEditing  puoi controllare la mia merenda: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Ecco il codice:

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
2017-07-19 08:05



Esempio di codice seguente:

<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
2017-08-23 14:47