reactjs - 过滤简单的平面列表
问题描述
我想通过搜索栏过滤这个简单的平面列表。我如何对其进行编码,以便无论我在输入文本上写什么,它都会过滤平面列表?你能帮我完成它吗?
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {ListItem, SearchBar} from 'react-native-elements';
export default class HomeScreen extends React.Component{
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Home</Text>
</View>
<View style={styles.container1}>
<Icon name={"ios-search"} style={styles.icon}/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "white"
selectionColor="black"
keyboardType="default"
/>
</View>
<View style={styles.flatlist}>
<FlatList
data = {[
{key:'Tiago'},
{key:'Ricardo'},
{key:'Beatriz'},
{key:'Miguel'},
{key:'Simão'},
{key:'David'}
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
</View>
);
}
}
解决方案
您应该有一个 searchtext 的状态值并根据它过滤数组。该组件应如下所示。
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
searchText: '',
};
}
render() {
//Data can be coming from props or any other source as well
const data = [
{ key: 'Tiago' },
{ key: 'Ricardo' },
{ key: 'Beatriz' },
{ key: 'Miguel' },
{ key: 'Simão' },
{ key: 'David' },
];
const filteredData = this.state.searchText
? data.filter(x =>
x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
)
: data;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Home</Text>
</View>
<View style={styles.container1}>
<Icon name={'ios-search'} style={styles.icon} />
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholderTextColor="white"
selectionColor="black"
keyboardType="default"
onChangeText={text => this.setState({ searchText: text })}
value={this.state.searchText}
/>
</View>
<View style={styles.flatlist}>
<FlatList
data={filteredData}
renderItem={({ item }) => (
<Text style={styles.item}>{item.key}</Text>
)}
/>
</View>
</View>
);
}
}
推荐阅读
- nuget-package - 无法引用我的 nuget 包命名空间
- git - 将大约 6k 个提交压缩为一个
- android - Google SignIn 在请求离线访问时返回错误
- javascript - 查找具有必要键的对象数组并返回其值
- php - 我想使用 laravel register api 在 users 表中插入 referal_code 值
- php - 无需更改主机文件即可在 PHP/APACHE 中访问我的 Web 应用程序
- forms - 持久底部表单数据
- python - conda包的一个奇怪问题:不能导入,不能删除
- css - Angular 2 组件使用来自另一个组件的 css
- cypress - 如何断言在下拉列表中选择了哪个值