<p>I want to enhance my DataTable by adding search filter in ReactJS. I want the user to be able to search for a specific entry in the table. The goal is to allow users to easily search and find specific data in tables.How to implement this?</p> <pre class="brush:php;toolbar:false;"><><ScrollView showsHorizontalScrollIndicator> <View style={styles.root}> <TouchableOpacity style={[styles.button, styles.buttonOutline]} onPress={handleBackButtonClick} > <Text style={styles.buttonOutlineText}>返回</Text> </TouchableOpacity> </View> <TextInput style={styles.searchInput} placeholder="按客户搜索..." /> <DataTable style={styles.container}> <DataTable.Header style={styles.tableHeader}> <DataTable.Title>客户</DataTable.Title> <DataTable.Title>地址</DataTable.Title> <DataTable.Title>手机号码</DataTable.Title> <DataTable.Title>车牌号码</DataTable.Title> </DataTable.Header> {displayedCustomers.map((customer, index) =>{ return( <TouchableOpacity key={index} onPress={() => handleRowClick(customer)} style={[ styles.row, selectedRow && selectedRow.id === customer.id && styles.selectedRow]} > <DataTable.Row key={index}> <DataTable.Cell>{customer.customer}</DataTable.Cell> <DataTable.Cell>{customer.address}</DataTable.Cell> <DataTable.Cell>{customer.mobileno}</DataTable.Cell> <DataTable.Cell>{customer.plateno}</DataTable.Cell> </DataTable.Row> </TouchableOpacity> ) })} </DataTable> <DataTable.Pagination page={currentPage} numberOfPages={Math.ceil(customers.length / itemsPerPage)}onPageChange={handlePageChange} /> </ScrollView></pre>

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

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
   placeholder="按客户搜索..."
   onChangeText={handleSearchInputChange}
   value={searchQuery}
/>

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