Dalam Reactjs, bagaimana saya boleh menambah penapis carian pada Jadual Data saya?

Question

Saya mahu meningkatkan Jadual Data saya dengan menambahkan penapis carian dalam ReactJS. Saya mahu pengguna dapat mencari entri tertentu dalam jadual. Matlamatnya adalah untuk membolehkan pengguna mencari dan mencari data tertentu dalam jadual dengan mudah.Bagaimana untuk melaksanakan ini?

<>
            
                
                    返回

                
            
            
                    
                            
                                客户
                                地址
                                手机号码
                                车牌号码
                            
                            {displayedCustomers.map((customer, index) =>{
                                kembali(
                                 handleRowClick(pelanggan)}
                                    style={[ styles.row,
                                        dipilihBaris && selectedRow.id === customer.id && styles.selectedRow]} 
                                >
                                
                                    {customer.customer}
                                    {customer.address}
                                    {customer.mobileno}
                                    {customer.plateno}
                                
                                
                                )
                                
                            })}

                        
                
                
            

Answer 1

Buat keadaan untuk menahan pertanyaan carian dan keadaan lain untuk menyimpan data yang ditapis:

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

Sekarang tambah fungsi ini. Kemas kini status searchQuery状态，然后根据给定的text参数进行过滤，并将结果设置为filteredCustomers dahulu.

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

Laksanakan logik ini setiap kali anda menaip dalam carian TextInput.

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

Akhir sekali, hanya peta melalui filtredCustomers而不是displayedCustomers:

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