<p>Ich möchte meine DataTable erweitern, indem ich einen Suchfilter in ReactJS hinzufüge. Ich möchte, dass der Benutzer nach einem bestimmten Eintrag in der Tabelle suchen kann. Ziel ist es, Benutzern das einfache Suchen und Finden bestimmter Daten in Tabellen zu ermöglichen.Wie kann man das umsetzen?</p> <pre class="brush:php;toolbar:false;"><><ScrollView zeigtHorizontalScrollIndicator> <View style={styles.root}> <TouchableOpacity style={[styles.button,styles.buttonOutline]} onPress={handleBackButtonClick} > <Text style={styles.buttonOutlineText}>返回</Text> </TouchableOpacity> </Anzeigen> <TextInput style={styles.searchInput} placeholder="按客户搜索..." /> <DataTable style={styles.container}> <DataTable.Header style={styles.tableHeader}> <DataTable.Title> Inhalt</DataTable.Title> <DataTable.Title>Weitere Informationen</DataTable.Title> <DataTable.Title>手机号码</DataTable.Title> <DataTable.Title> </DataTable.Header> {displayedCustomers.map((customer, index) =>{ zurückkehren( <TouchableOpacity key={index} onPress={() => handleRowClick(Kunde)} 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={aktuelleSeite} 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>
  )  
})