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();

也不要忘记清除您的状态。

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

3 个答案: