Question

我想为我的SectionList创建一个搜索过滤器，但似乎无法做到。我创建了一个SectionList，它显示了具有不同数据的集群。我想从cluster2进行类似sweet或fun的搜索，但是它不起作用。下面是我的代码。如果有人可以帮助我或提供替代解决方案进行搜索，将不胜感激。

这是我的“群集”组件

const KEYS_TO_FILTERS = ['data'];
import {ClusterData} from '../data/ClusterData';

export default class Cluster1 extends Component{
constructor(props) {
    super(props);
    this.state = {
      searchTerm: ''
    }
  }
  searchUpdated(term) {
    this.setState({ searchTerm: term })
  }
render(){
    const filteredMoods = ClusterData.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
 return(
     <View style={styles.container}>
    <SearchInput 
      onChangeText={(term) => { this.searchUpdated(term) }} 
      style={styles.searchInput}
      placeholder="Type a mood to search"
      />
         <SectionList  

          renderItem={({item,index})=>{
              return(
             <SectionListItem  item={item} index={index}> </SectionListItem>);}} 
                       sections={ClusterData}
                       keyExtractor={(item, index) => item.name}>
         </SectionList>
     </View>      
 );
 }}    
 class SectionListItem extends Component{
 render(){
     return(
         <View>
         <Text style={styles.moodname}>{this.props.item.name}</Text>
         </View>
     );
 }
 }

这是我的数据部分

const ClusterData = [
{ title: 'Cluster1', 
data: 
[
  {name: 'passionate'},
  {name: 'rousing'},
  {name: 'confident'},
  {name: 'boisterous'},
  {name: 'rowdy'}
],
},
{ title: 'Cluster2', 
  data: 
[
  {name: 'rollicking'},
  {name: 'cheerful'},
  {name: 'fun'},
  {name: 'sweet'},
  {name: 'amiable'},
  {name: 'natured'}
],

Answer 1

您可以将部分数据置于状态，然后可以动态更改它，只需将其添加到Cluster1状态dataToShow状态，初始数据将为ClusterData。然后，您需要将sectionList的sections数据更改为searchUpdated(term) { let matchedItemsArr = []; //Run a loop to check if the input value match the title. for(let i = 0; i < this.state.dataToShow.length; i++){ if(this.state.dataToShow[i].title.includes(term)){ matchedItemsArr.push(this.state.dataToShow[i]); } } //If the input is empty set the data back to its origin data if(term === ''){ this.setState({ dataToShow: ClusterData, searchTerm: term }); }else{ this.setState({ dataToShow: matchedItemsArr, searchTerm: term }); } }

和

在搜索输入功能上，您可以添加以下内容：

    /* 1 createdAt:6/13/2018, 5:17:07 PM*/
{   "_id" : ObjectId("5b21043b18f3bc7c0be3414c"),   
    "Number" : 242,
    "State" : "2",
    "City" : "3",
    "Website" : "",
    "Contact_Person_Name" : "Ajithmullassery",  
    "CreatedById" : "Admin",
    "UpdatedById" : "Admin",    
    "IsActive" : true,
    "UpdatedOn" : ISODate("2018-06-13T17:17:07.313+05:30"),
    "CreatedOn" : ISODate("2018-06-13T17:17:07.313+05:30")  
},

/* 2 createdAt:6/13/2018, 6:45:42 PM*/
{
    "_id" : ObjectId("5b2118fe18f3bc7c0be3415b"),   
    "Number" : 243,
    "State" : "1",
    "City" : "143",
    "Website" : "",
    "Contact_Person_Name" : "sachitkumar",  
    "CreatedById" : "vinoth",
    "UpdatedById" : "Admin",    
    "IsActive" : true,
    "UpdatedOn" : ISODate("2018-06-13T18:45:42.590+05:30"),
    "CreatedOn" : ISODate("2018-06-13T18:45:42.590+05:30")

},

/* 3 createdAt:6/18/2018, 5:34:33 PM*/
{
    "_id" : ObjectId("5b279fd118f3bc7c0be34166"),   
    "Number" : 244,
    "State" : "0",
    "City" : "8",
    "Website" : "",
    "Contact_Person_Name" : "Akshay",   
    "CreatedById" : "vinoth",
    "UpdatedById" : "Admin",    
    "IsActive" : true,
    "UpdatedOn" : ISODate("2018-06-18T17:34:33.270+05:30"),
    "CreatedOn" : ISODate("2018-06-18T17:34:33.270+05:30")

},

/* 4 createdAt:6/20/2018, 1:02:21 PM*/
{
    "_id" : ObjectId("5b2a030518f3bc7c0be3416d"),   
    "Number" : 245,
    "State" : "5",
    "City" : "6",
    "Website" : "",
    "Contact_Person_Name" : "Dr DS Mithra", 
    "CreatedById" : "vinoth",
    "UpdatedById" : "Admin",
    "FacilityID" : "594387f5e2de7be83be5d5f1",
    "IsActive" : true,
    "UpdatedOn" : ISODate("2018-06-20T13:02:21.887+05:30"),
    "CreatedOn" : ISODate("2018-06-20T13:02:21.887+05:30")
},

/* 5 createdAt:6/20/2018, 1:08:58 PM*/
{
    "_id" : ObjectId("5b2a049218f3bc7c0be3416e"),   
    "Number" : 245,
    "State" : "5",
    "City" : "6",
    "Website" : "",
    "Contact_Person_Name" : "Ramaswamy Manickam",   
    "CreatedById" : "vinoth",
    "UpdatedById" : "Admin",    
    "IsActive" : true,
    "UpdatedOn" : ISODate("2018-06-20T13:08:58.040+05:30"),
    "CreatedOn" : ISODate("2018-06-20T13:08:58.040+05:30")

}

Answer 2

只需按照以下步骤进行搜索过滤功能即可。

假设我们有一个类似对象的数组。

this.state = {
ClusterData : [
    { title: 'Cluster1', 
    data: 
    [
      {name: 'passionate'},
      {name: 'rousing'},
      {name: 'confident'},
      {name: 'boisterous'},
      {name: 'rowdy'}
    ],
    },
    { title: 'Cluster2', 
      data: 
    [
      {name: 'rollicking'},
      {name: 'cheerful'},
      {name: 'fun'},
      {name: 'sweet'},
      {name: 'amiable'},
      {name: 'natured'}
    ]}

filterArray = (text) => {
        let search = text.toLowerCase();
        this.setState({
            check: this.state.ClusterData.filter(obj => obj.name.toLowerCase().includes(search))
        });
    }

并在

之类的inputText上调用此函数

<TextInput onChangeText={(val) => { this.filterArray(val) }} placeholder={'Search'}/>

反应本机搜索过滤器SectionList

2 个答案: