Clever Geek Handbook

Clear React Native TextInput

Working with the Redux AddTodo example in React Native. The first AddTodo example below uses state to store the TextInput value and works fine.

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

However, following a few Redux examples, the following code is much shorter and also works, except it is TextInput

value

not cleared after submission

let AddTodo = ({ dispatch }) => {

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

Is there a way to clear the InputText value from onSubmitEditing?

+23


source to share


10 answers


Add ref to your TextInput like:

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


then call this.textInput.clear()

to clear the entered value

+49


source


This will give a standard plain text button.



<TextInput clearButtonMode="always" />
+11


source


I am using Native base and this is how I made it work

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

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

then whenever i want to clear i use

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

link https://github.com/facebook/react-native/issues/18843

+4


source


In accordance with the changes and recommendations emerged after the React 16.3 , you will need to get a link in your constructor using React.createRef:

In a constructor function: this.myTextInput = React.createRef();

When rendering the function:

<TextInput ref={this.myTextInput}/>

And then you can call

this.myTextInput.current.clear();

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

+3


source


it works for me

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

and this.attendee.setNativeProps({ text: '' })

// Clear text after typing

+1


source


Following code example:

<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);
}
+1


source


I am doing this code for clearing TextInput in React Native OnSubmitEditing

you can check my appetizer: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Here is the 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


source


This worked for me ..

Initiate myTextInput in the constructor: 

this.myTextInput = React.createRef();

Add a link to the render function:

<Input ref={this.myTextInput} />

And then you can call

this.myTextInput.current.value='';
0


source


One of the simpler approaches would be to use a property value

in TextInput

and use a component state value object to set the textInput value.

state = {
   inputTextValue : '',
}

submitText = () => {
    //handle the click action

    //add this line at the end of the function after you are done handling with the input text value.
    this.state.inputTextValue = '';
}  

<TextInput 
       onChangeText={(text) => this.setState({ inputText: text })}
       placeholder="Monday breakfast"
       value={this.state.inputTextValue}
 />
 <TouchableOpacity 
       onPress={() => this.submitText()}>
       <Text>Submit</Text>
 </TouchableOpacity>
0


source 


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

         this.name.clear();
         this.email.clear();
         this.password.clear();
         this.confirmPassword.clear();
0


source






More articles:


All Articles