0

当我开始输入时，我在 SearchBar 中输入的文本会在几毫秒后自动清除。它回到占位符状态，可能是什么问题？

这是我的代码：

    return (
      <View style={{ marginTop: 30 }}>
        <SearchBar
          placeholder="Type Here..."
          lightTheme
          round
          onChangeText={this.handleSearch}
        />
      </View>
    );
  };

这是 handleSearch 方法的代码，

handleSearch = (text) => {
    const formatQuery = text.toLowerCase();
    const data = _.filter(this.state.fullData, (user) => {
      return contains(user, formatQuery);
    });
    this.setState({ query: formatQuery, data }, () => this.makeRemoteRequest());
  };

makeRemoteRequest() 的代码：

makeRemoteRequest = _.debounce(() => {
    this.setState({ loading: true });
    getUsers(20, this.state.query)
      .then((users) => {
        this.setState({
          loading: false,
          data: users,
          fullData: users,
        });
      })
      .catch((error) => {
        this.setState({ error, loading: false });
      });
  }, 250);

即使我删除了 debounce 方法，问题仍然存在，所以我认为这个问题与其他问题有关。另外，这就像我在 react-native 开发的第三天，所以请原谅任何新手的错误。

4

1 回答 1

1

如果我没记错的话，你应该向 SearchBar 添加一个 value 道具，并像这样放置一个状态变量：

<SearchBar
      placeholder="Type Here..."
      lightTheme
      round
      onChangeText={this.handleSearch}
      value={this.state.text} //use deconstructing
    />

并在进行句柄搜索之前对其进行更新

handleSearch = (text) => {
this.setState({text})
const formatQuery = text.toLowerCase();
const data = _.filter(this.state.fullData, (user) => {
  return contains(user, formatQuery);
});
this.setState({ query: formatQuery, data }, () => this.makeRemoteRequest());

};

您应该从 react-native-elements 检查 SearchBar 文档：https ://react-native-elements.github.io/react-native-elements/docs/searchbar.html

于 2020-06-24T14:04:02.823 回答