Не удается очистить панель поиска React Native - PullRequest
Новая
       73

Не удается очистить панель поиска React Native

0 голосов
/ 28 мая 2020

Я новичок в React Native и пытаюсь встроить панель поиска для своего Flatlist. Но когда я нажимаю Backspace, список снова не обновляется. Похоже, метод onClear не работает. Он не распознает параметр text с помощью метода onClear: 

constructor(props) {
    super(props);

   this.state = {
      markers: [{
        key: 'A'
        title: 'titel',
         tekst: 'random'
        },

        ], search: ''
      }
  }


  search = text => {
    console.log(text);
  };
  clear = () => {
    this.search.clear();
  };

Функция поиска: 

searchAction=(text)=>{
        const newData=this.state.markers.filter(item=>{
            const itemData=`${item.title.toUpperCase()} `;
            const textData=text.toUpperCase();
            return itemData.indexOf(textData) > -1;

        });
        this.setState({
            markers:newData,
            search:text,
        });
    }

Панель поиска и плоский список с методом onClear: 

     renderHeader=()=>{
        const {search} = this.state;
          return(

<SearchBar 
placeholder="Zoek hier..."
onChangeText={text=>this.searchAction(text)}
onClear={text=>this.searchAction('')}
autoCorrect={false}  
value = {search} />
)}

    renderItem = (item) =>{
return(
  <View key={item.key} >          
  <TouchableOpacity onPress={()=>this.showItem(item.title)}>
  <Text>{item.title} </Text>
  <Text>{item.tekst}</Text>
</TouchableOpacity>
</View>
)  
  }
  render(){
    return(
        <SafeAreaView >
            <FlatList
            data={this.state.markers}
            renderItem={({item})=>this.renderItem(item)}
            enableEmptySections={true}
            keyExtractor={item=>item.title}
            ListHeaderComponent={this.renderHeader}
            >
            </FlatList>
       </SafeAreaView>         

    )
}
}

Как это исправить?

...