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}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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参数进行过滤，并将结果设置为filteredCustomersdahulu.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.Akhir sekali, hanya peta melalui
filtredCustomers而不是displayedCustomers:{filteredCustomers.map((customer, index) => { return ( // .... ) })