首頁  >  問答  >  主體

在Reactjs中,如何為我的DataTable新增搜尋篩選器?

<p>我想透過在ReactJS中新增搜尋過濾器來增強我的DataTable。我希望用戶能夠在表格中搜尋特定的條目。目標是允許用戶輕鬆搜尋和查找表格中的特定資料。如何實現這個?</p> <pre class="brush:php;toolbar:false;"><><ScrollView 顯示Horizo​​ntalScrollIndicator> <查看樣式={styles.root}> <可觸摸不透明度 style={[styles.button, styles.buttonOutline]} onPress={handleBackButtonClick} > <文字樣式={styles.buttonOutlineText}>返回 </可觸碰不透明度> </查看> <文字輸入 樣式={styles.searchInput} placeholder="依客戶搜尋..." >> 客戶 位址 手機號碼 車牌號碼 </DataTable.Header> {displayedCustomers.map((客戶, 索引) =>{ 返回( <可觸摸不透明度 鍵={索引} onPress={() =>;處理行點擊(客戶)} 樣式={[ 樣式.行, 選定的行 && selectedRow.id === customer.id && styles.selectedRow]} > {customer.customer} {客戶.網址} {customer.mobileno} {customer.plateno} </可觸碰不透明度> ) })} </資料表> > </ScrollView></pre>
P粉447002127P粉447002127450 天前443

全部回覆(1)我來回復

  • P粉637866931

    P粉6378669312023-08-18 14:28:26

    建立一個狀態來保存搜尋查詢,並建立另一個狀態來儲存過濾後的資料:

    const [searchQuery, setSearchQuery] = useState('');
    const [filteredCustomers, setFilteredCustomers] = useState(customers); // 初始化为完整列表
    

    現在加入這個函數。首先更新searchQuery狀態,然後根據給定的text參數進行過濾,並將結果設為filteredCustomers狀態。

    const handleSearchInputChange = (text) => {
        setSearchQuery(text);
        const filtered = customers.filter(
          (customer) =>
            customer.customer.toLowerCase().includes(text.toLowerCase()) ||
            customer.address.toLowerCase().includes(text.toLowerCase()) ||
            customer.mobileno.includes(text) ||
            customer.plateno.includes(text)
        );
        setFilteredCustomers(filtered);
      };
    

    每次在搜尋TextInput中輸入時都要執行這個邏輯。

    <TextInput
       placeholder="按客户搜索..."
       onChangeText={handleSearchInputChange}
       value={searchQuery}
    />
    

    最後,只需透過filtredCustomers而不是displayedCustomers來對應:

    {filteredCustomers.map((customer, index) => {
      return (
         <TouchableOpacity
            key={index}
         >
           // ....
         </TouchableOpacity>
      )  
    })
    

    回覆
    0
  • 取消回覆