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

Question

<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>

Answer 1

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

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>
  )  
})