Reactjs で、DataTable に検索フィルターを追加するにはどうすればよいですか?

Question

ReactJS に検索フィルターを追加して DataTable を強化したいと考えています。ユーザーがテーブル内の特定のエントリを検索できるようにしたいと考えています。目標は、ユーザーがテーブル内の特定のデータを簡単に検索して見つけられるようにすることです。これを実装するにはどうすればよいでしょうか?

<><ScrollView showshorizo​​ntalScrollIndicator>
            <スタイル={styles.root}を表示>
                <タッチ可能な不透明度
                    style={[styles.button, style.buttonOutline]}
                    onPress={ハンドルBackButtonClick}
                >
                    <Text style={styles.buttonOutlineText}>戻り</Text>

                </TouchableOpacity>
            </表示>
            <テキスト入力
                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((顧客, インデックス) =>{
                                戻る（
                                <タッチ可能な不透明度
                                    キー={インデックス}
                                    onPress={() => handleRowClick(顧客)}
                                    style={[ style.row,
                                        selectedRow && selectedRow.id === customer.id &&スタイル.selectedRow]}
                                >
                                <DataTable.Row key={index}>
                                    <DataTable.Cell>{customer.customer}</DataTable.Cell>
                                    <DataTable.Cell>{顧客の住所}</DataTable.Cell>
                                    <DataTable.Cell>{customer.mobileno}</DataTable.Cell>
                                    <DataTable.Cell>{customer.plateno}</DataTable.Cell>
                                </DataTable.Row>
                                </TouchableOpacity>
                                ）
                                
                            })}

                        
                </DataTable>
                <DataTable.ページネーション
                    ページ={現在のページ}
                    numberOfPages={Math.ceil(customers.length / itemsPerPage)}onPageChange={handlePageChange}
                />
            </ScrollView>

Answer 1

検索クエリを保持する状態と、フィルター処理されたデータを保存する別の状態を作成します:

リーリー

次にこの関数を追加します。まず searchQuery ステータスを更新し、次に指定された text パラメータに基づいてフィルタリングし、結果を filteredCustomers ステータスに設定します。

リーリー

このロジックは、検索に TextInput を入力するたびに実行する必要があります。

リーリー

最後に、displayedCustomers ではなく filtredCustomers でマッピングします。

リーリー