<p>我想通过在ReactJS中添加搜索过滤器来增强我的DataTable。我希望用户能够在表格中搜索特定的条目。目标是允许用户轻松搜索和查找表格中的特定数据。如何实现这个？</p> <pre class="brush:php;toolbar:false;">&lt;&gt;&lt;ScrollView showsHorizontalScrollIndicator&gt; &lt;View style={styles.root}&gt; &lt;TouchableOpacity style={[styles.button, styles.buttonOutline]} onPress={handleBackButtonClick} &gt; &lt;Text style={styles.buttonOutlineText}&gt;返回&lt;/Text&gt; &lt;/TouchableOpacity&gt; &lt;/View&gt; &lt;TextInput style={styles.searchInput} placeholder="按客户搜索..." /&gt; &lt;DataTable style={styles.container}&gt; &lt;DataTable.Header style={styles.tableHeader}&gt; &lt;DataTable.Title&gt;客户&lt;/DataTable.Title&gt; &lt;DataTable.Title&gt;地址&lt;/DataTable.Title&gt; &lt;DataTable.Title&gt;手机号码&lt;/DataTable.Title&gt; &lt;DataTable.Title&gt;车牌号码&lt;/DataTable.Title&gt; &lt;/DataTable.Header&gt; {displayedCustomers.map((customer, index) =&gt;{ return( &lt;TouchableOpacity key={index} onPress={() =&gt; handleRowClick(customer)} style={[ styles.row, selectedRow &amp;&amp; selectedRow.id === customer.id &amp;&amp; styles.selectedRow]} &gt; &lt;DataTable.Row key={index}&gt; &lt;DataTable.Cell&gt;{customer.customer}&lt;/DataTable.Cell&gt; &lt;DataTable.Cell&gt;{customer.address}&lt;/DataTable.Cell&gt; &lt;DataTable.Cell&gt;{customer.mobileno}&lt;/DataTable.Cell&gt; &lt;DataTable.Cell&gt;{customer.plateno}&lt;/DataTable.Cell&gt; &lt;/DataTable.Row&gt; &lt;/TouchableOpacity&gt; ) })} &lt;/DataTable&gt; &lt;DataTable.Pagination page={currentPage} numberOfPages={Math.ceil(customers.length / itemsPerPage)} onPageChange={handlePageChange} /&gt; &lt;/ScrollView&gt;</pre>

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

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
   placeholder="按客户搜索..."
   onChangeText={handleSearchInputChange}
   value={searchQuery}
/>

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