Dans Reactjs, comment puis-je ajouter un filtre de recherche à mon DataTable ?

Question

Je souhaite améliorer mon DataTable en ajoutant un filtre de recherche dans ReactJS. Je souhaite que l'utilisateur puisse rechercher une entrée spécifique dans le tableau. L'objectif est de permettre aux utilisateurs de rechercher et de trouver facilement des données spécifiques dans des tableaux.Comment mettre en œuvre cela ?

<><ScrollView showsHorizontalScrollIndicator>
            <View style={styles.root}>
                <OpacitéTouchable
                    style={[styles.button, styles.buttonOutline]}
                    onPress={handleBackButtonClick}
                >
                    <Text style={styles.buttonOutlineText}>返回</Text>

                </TouchableOpacity>
            </Afficher>
            <EntréeTexte
                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((client, index) =>{
                                retour(
                                <OpacitéTouchable
                                    clé={index}
                                    onPress={() => handleRowClick (client)}
                                    style={[ styles.row,
                                        Ligne sélectionnée && 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={PageActuelle}
                    numberOfPages={Math.ceil(customers.length / itemsPerPage)}onPageChange={handlePageChange}
                />
            </ScrollView>

Answer 1

Créez un état pour contenir la requête de recherche et un autre état pour stocker les données filtrées :

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

Ajoutez maintenant cette fonction. Mettez d’abord à jour le statut 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);
  };

Exécutez cette logique à chaque fois que vous tapez une recherche TextInput.

<TextInput
   placeholder="按客户搜索..."
   onChangeText={handleSearchInputChange}
   value={searchQuery}
/>

Enfin, il suffit de cartographier via filtredCustomers而不是displayedCustomers :

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