如何清除基于本机的输入文本？

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

这是运行代码，将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>
    );
  }

Answer 2

我使用值和状态来实现此功能

这是一个例子：

<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设置为空