P粉6378669312023-08-18 14:28:26
建立一個狀態來保存搜尋查詢,並建立另一個狀態來儲存過濾後的資料:
const [searchQuery, setSearchQuery] = useState(''); const [filteredCustomers, setFilteredCustomers] = useState(customers); // 初始化为完整列表
現在加入這個函數。首先更新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); };
每次在搜尋TextInput
中輸入時都要執行這個邏輯。
<TextInput placeholder="按客户搜索..." onChangeText={handleSearchInputChange} value={searchQuery} />
最後,只需透過filtredCustomers
而不是displayedCustomers
來對應:
{filteredCustomers.map((customer, index) => { return ( <TouchableOpacity key={index} > // .... </TouchableOpacity> ) })