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

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空

Answer 3

我完全同意 Muhammad Hanzala 的观点，因为它对我有用，但有一个非常重要的例外，我必须这样做才能使其正常工作，确保将文本输入的引用添加到您的构造函数中，如下所示：

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

一个完整的例子在你的输入元素中看起来像这样......

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

在您的构造函数中：

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

最后你可以打电话：

this.SearchInput._root.clear(); 

并且不要忘记清除您的状态..