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