Реагировать на собственную панель поиска показывает плоский список, только если первые 2 символа похожи - PullRequest
Новая
       7

Реагировать на собственную панель поиска показывает плоский список, только если первые 2 символа похожи

0 голосов
/ 01 апреля 2020 

here is my code:import React, {useState} from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  TextInput,
} from 'react-native';

const namesData = [
  {fname: 'Sujay', lname: 'Atkare'},
  {fname: 'Pankaj', lname: 'Bhardwaj'},
  {fname: 'Sagar', lname: 'Vande'},
  {fname: 'Rohit', lname: 'Dhanke'},
  {fname: 'Uday', lname: 'Kadam'},
  {fname: 'Abhijeet', lname: 'Shah'},
  {fname: 'Kundan', lname: 'Zalate'},
  {fname: 'Sneha', lname: 'Shinde'},
  {fname: 'Akshay', lname: 'Singh'},
  {fname: 'Dilip', lname: 'Patil'},
  {fname: 'Imran', lname: 'Khan'},
  {fname: 'Saurabh ', lname: 'Kulkarni'},
  
];
const SearchBarScreen = () => {
  const [data, setData] = useState([]);
  const [value, setValue] = useState('');

  const _onRenderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: 'pink',
        }}
      />
    );
  };

  const _searchData = text => {
    if (text) {
      let newList = namesData.filter(item => {
        const newItem = `${(item.fname + '' + item.lname).toUpperCase()}`;
        const textData = text.toUpperCase();
        return newItem.indexOf(textData) > -1;
      });
      setData(newList);
      setValue(text);
    } else {
      setData([]);
      setValue(text);
    }
  };

  const _onRenderHeader = () => {
    return (
      <TextInput
        style={{height: 60, borderColor: '#000', borderWidth: 1}}
        placeholder="Search here"
        onChangeText={text => _searchData(text)}
        value={value}
      />
    );
  };

  return (
    <View
      style={{
        flex: 1,
        padding: 25,
        width: '98%',
        alignSelf: 'center',
        justifyContent: 'center',
      }}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <Text style={{padding: 10}}>
            {item.fname} {item.lname}
          </Text>
        )}
        keyExtractor={item => item.fname}
        ItemSeparatorComponent={() => _onRenderSeparator()}
        ListHeaderComponent={_onRenderHeader()}
        enableEmptySections={true}
      />
    </View>
  );
};

export default SearchBarScreen;

Я новичок, чтобы реагировать нативно, я пытался реализовать панель поиска, которая получает список данных из массива и отображать ig с помощью flatlist. Но я хочу показывать плоский список только тогда, когда чьи начальные символы похожи на символы, которые я печатаю. Ex. Если я наберу в строке поиска «Go». Я хочу показать список элементов, начинающихся только с 'Go'

1 Ответ

0 голосов
/ 01 апреля 2020

Не знаю ваш конкретный c формат данных, но вы, как правило, хотели бы сделать что-то вроде этого: 

const MyComponent = (props) => {
  const [query, setQuery] = useState('');
  const [data, setData] = useState(props.data);

  useEffect(() => {
    // filter your data here. I'm assuming you have a list of strings

    // when user types something and them clears the text, you want to go back to initial list
    if (!query) {
      setData(props.data);
    }

    setData(data.filter((d) => d.includes(query)));
  }, [query]);
  return (
    <View>
      <TextInput
        value={query}
        onChangeText={(t) => {
          setQuery(t);
        }}
      />
      <FlatList
        data={data}
        renderItem={() => {
          // whatever you want to render
        }}
      />
    </View>
  );
};
...