Question

我试图在FlatList中添加搜索栏，这里是从API提取数据并在FlatList上进行填充，但是我必须过滤该列表，因为它可能包含很多数据。所以请帮我。我尝试了一些示例，但遇到了错误，因此有时什么也没发生。请查看帮助并

preg_replace

谢谢...

Answer 1

因此，您需要保留数据的原始值，然后可以根据关键输入对其进行过滤，并将状态设置为显示在清单中。例如，如果在if输入中更改文本，则过滤掉对象的匹配子字符串，然后将其放入新数组中，并将其设置在filterByValue数组中，该数组将显示在平面列表中。

onSearchInputChange = (text) => {
    const filterByValue = this.state.data.filter(x => 
     x.name.toLowerCase().includes(text.toLowerCase()));
    this.setState({
      searchText: text,
      filterByValue
    });
  }

然后将flatlist的数据作为

<FlatList 
   data={filterByValue}
   renderItem={this.renderItem}
   keyExtractor={this.keyExtractor}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.render_FlatList_header}
/>

有关工作示例，请尝试以下操作 https://snack.expo.io/rJY0gYlIV

如何在FLatList中实现Sraech条

1 个答案: