как очистить исходный текст ввода?

Question

Я пытаюсь это

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

и функция:

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

Я получаю эту ошибку:

this.SearchInput.clear () нефункция

Answer 1

Я использую значение и состояние для достижения этой функциональности

вот пример:

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

объявить значение по умолчанию value в constructor

this.state = {
  value: ''
}

прослушайте onTextChange следующим образом, убедитесь, что значение на Input останется таким же, как мы вставляем, а не пустым навсегда:

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

наконец, на clear функция

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

просто установить обратно value на пустое

Answer 2

Это рабочий код, измените ref на getRef и используйте this.SearchInput._root.clear(); вместо 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>
    );
  }