Wie kann ich in Reactjs einen Suchfilter zu meiner DataTable hinzufügen?

Question

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?

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

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