how can I clear Native-base Input text?

Question

I try this

  <Input placeholder="search...."
         ref={(ref) => { this.SearchInput = ref; }}
         />
  <Button transparent onPress={this.clear}>
      <Ionicons name="ios-close" />
  </Button>

and function:

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

I get this error:

this.SearchInput.clear() is not a function

check this answer out https://stackoverflow.com/a/51988514/6147182 — Mohamed Benkedadra, Apr 21 '19 at 00:01
you aren't use State or Redux or any state manager for control your text input? — nima, Apr 21 '19 at 12:31

score 5 · Answer 1 · answered Apr 21 '19 at 12:20

5

This is the running code, change ref to getRef and use this.SearchInput._root.clear(); instead of this.SearchInput.clear();

  clear = () => {
    this.SearchInput._root.clear();
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Item floatingLabel>
            <Input placeholder="search...."
              getRef={(ref) => this.SearchInput = ref}
            />
          </Item>
          <Button onPress={this.clear}>
            <Ionicons name="ios-close" />
          </Button>
        </Content>
      </Container>
    );
  }

answered Apr 21 '19 at 12:20

Muhammad Hanzala

105
5

what is the difference with ref and getRef, – Mike Victoria May 12 '20 at 03:06
For me it only worked when I used. "ref" in place of "getRef" in this example – Leon Aug 19 '21 at 23:06

score 3 · Answer 2 · answered May 16 '19 at 08:41

I use value and state to achieve this functionality

here is the example:

<Input
  value={ this.state.value }
  onChangeText={ this.onTextChange }
/>
<Button onPress={this.clear}>
  <Ionicons name="ios-close" />
</Button>

declare default value's value on constructor

this.state = {
  value: ''
}

listen to onTextChange as follows, this make sure that the value on Input stay the same as we inserting, not blank forever:

onTextChange = (value) => {
  this.setState({ value })
}

finally, on clear function

clear = () => {
  this.setState({ value: '' })
}

just set back value to empty

Glad I can help ^_^ – Komang Sidhi Artha Nov 12 '19 at 05:20 — Komang Sidhi Artha, Nov 12 '19 at 05:20

score 0 · Answer 3 · answered Aug 15 '19 at 23:52

i totally agree with Muhammad Hanzala as it worked for me on this but there is a little exception which is really important which i had to do to make it work be sure to add the reference of the text input to your constructor like this:

constructor()
  {
    ...
   this.SearchInput = React.createRef();
  }

A full example will look like this in your input element...

<InputgetRef={(ref) => this.SearchInput = ref}/>

in your constructor :

constructor()
  {
    ...
   this.SearchInput = React.createRef();
  }

and finally you can call:

this.SearchInput._root.clear();

and dont forget to clear your state..

how can I clear Native-base Input text?

3 Answers3