ReactJS に検索フィルターを追加して DataTable を強化したいと考えています。ユーザーがテーブル内の特定のエントリを検索できるようにしたいと考えています。目標は、ユーザーがテーブル内の特定のデータを簡単に検索して見つけられるようにすることです。これを実装するにはどうすればよいでしょうか?
<><スタイル={styles.root}を表示> <タッチ可能な不透明度 style={[styles.button, style.buttonOutline]} onPress={ハンドルBackButtonClick} > 戻り 表示> <テキスト入力 style={styles.searchInput} placeholder="按客户搜索..." />{displayedCustomers.map((顧客, インデックス) =>{ 戻る( <タッチ可能な不透明度 キー={インデックス} onPress={() => handleRowClick(顧客)} style={[ style.row, selectedRow && selectedRow.id === customer.id &&スタイル.selectedRow]} > 客户 地址 携帯番号コード 车牌号番号 ) })} {customer.customer} {顧客の住所} {customer.mobileno} {customer.plateno}
検索クエリを保持する状態と、フィルター処理されたデータを保存する別の状態を作成します:
リーリー次にこの関数を追加します。まず
リーリーsearchQuery
ステータスを更新し、次に指定されたtext
パラメータに基づいてフィルタリングし、結果をfilteredCustomers
ステータスに設定します。このロジックは、検索に
リーリーTextInput
を入力するたびに実行する必要があります。最後に、
リーリーdisplayedCustomers
ではなくfiltredCustomers
でマッピングします。