मेरे पास वर्तमान में एक खोज बार घटक है जो किसी भी पाठ की खोज करते समय एक फ्लैटलिस्ट प्रस्तुत करता है।

मेरी समस्या उदाहरण के लिए है, मैंने फ़ुटबॉल की खोज की, फ़्लैटलिस्ट सभी फ़ुटबॉल पोस्ट को प्रस्तुत करता है जिसे मैं सभी को देखने के लिए नीचे स्क्रॉल कर सकता हूं। अगर मैं फ़्लैटलिस्ट के बीच में स्क्रॉल करता हूं तो बास्केटबॉल की खोज करने का निर्णय लेता हूं, फ़्लैटलिस्ट बास्केटबॉल पोस्ट को प्रस्तुत करता है लेकिन यह सूची के शीर्ष से शुरू नहीं होता है, यह उसी स्थिति से शुरू होता है जो फुटबॉल खोज पर रुक गया था।

जब मैं खोज स्क्रॉल के onChangeText या कोई वैकल्पिक समाधान करता हूं तो मैं कैसे कार्यान्वित करूं?

यहाँ मेरा कोड है:

 const [search, setSearch] = useState("");

 const updateSearch=(search)=>{
 setSearch(search);
 }

 useEffect(() => {
  if(page>0)
 loadPosts(search,page);
  }, [page,search]);

 <SearchBar 
    placeholder="Search" 
    onChangeText={updateSearch} 
    value={search} 
    autoFocus = {true}
    onClear={()=>setPage(0)}
    />

  <FlatList
      data={search===""? emptyList:filteredList} />
0
kd12345 9 पद 2020, 08:47

1 उत्तर

सबसे बढ़िया उत्तर

दुर्भाग्य से, मैंने आपका नाश्ता नहीं चलाया, कुछ हिस्से गायब हैं लेकिन आप निम्न कार्य कर सकते हैं:

  1. FlatList के लिए रेफरी चर घोषित करें

    const ref = React.useRef();

  2. इसे FlatList घटक में पास करें

    <FlatList ref={ref} ... />

  3. अपडेटसर्च फ़ंक्शन के अंदर, यदि टेक्स्ट खाली है, तो आप मैन्युअल रूप से शीर्ष पर स्क्रॉल कर सकते हैं।

    const updateSearch = (search) => {
       ref.current.scrollToIndex({ index: 0 });
       setSearch(search);
    }
    

पी.एस. यह सिर्फ एक समाधान है।

0
Leri Gogsadze 9 पद 2020, 11:02