ReactJS+Antd如何实现清空搜索框后表格立即展示全量数据

问题原因 #

现有代码仅绑定onSearch事件，该事件默认仅在按下回车键、点击搜索按钮时触发，无法响应手动删除输入内容到空值的实时操作；同时未单独持久化存储全量原始数据，多次过滤后易出现原始数据丢失问题。

具体修改步骤 #

• 拆分状态，单独存储全量原始数据，避免过滤操作污染原始数据源
• 抽离通用过滤逻辑，增加空值判断，搜索词为空时直接返回全量数据
• 给搜索框绑定输入实时监听事件，覆盖手动删空、点击清空按钮的场景

1. 修正状态定义 #

// 存储全量原始表格数据，接口拉取/组件初始化时赋值
const [rawData, setRawData] = useState([])
// 存储表格当前渲染的数据源
const [dataSource, setDataSource] = useState([])

// 初始化参考示例：接口拿到数据后同时给两个状态赋值
// const fetchTableData = async () => {
//   const res = await getTableListApi()
//   setRawData(res)
//   setDataSource(res)
// }

2. 实现通用过滤方法 #

const handleTableFilter = (searchValue) => {
  // 搜索值为空/仅输入空格时，直接重置为全量数据
  if (!searchValue?.trim()) {
    setDataSource(rawData)
    return
  }
  const keyword = searchValue.toLowerCase()
  const filteredData = rawData.filter((row) => 
    Object.keys(row).some((field) => 
      String(row[field]).toLowerCase().includes(keyword)
    )
  )
  setDataSource(filteredData)
}

3. 修改Search组件绑定事件 #

Antd的Input.Search组件继承自Input，支持onChange事件实时监听输入内容变化，同时保留原有onSearch逻辑兼容主动搜索操作：

<Row>
   <Col lg={24}>
       <Search
         size='large'
         placeholder='Search something'
         enterButton='Search'
         prefix={<SearchOutlined />}
         style={{ borderRadius: 5 }}
         allowClear
         // 实时监听输入变化，手动删空、点清空按钮都会触发
         onChange={(e) => handleTableFilter(e.target.value)}
         // 保留回车、点搜索按钮的搜索能力
         onSearch={handleTableFilter}
       />
       <Table
         columns={columns}
         dataSource={dataSource}
         rowSelection={rowSelection}
       />
     </Col>              
</Row>

效果说明 #

修改完成后，不管是手动按删除键清空输入框内容，还是点击搜索框自带的清空按钮，都会立刻触发逻辑重置表格为全量数据，不需要额外按回车或点击搜索按钮。如果需要保留“输入完点搜索才触发过滤”的原有逻辑，可去掉onChange绑定，仅在onSearch中增加空值判断，同时绑定组件自带的onClear回调（Antd 4.x、5.x均支持）处理点击清空按钮的场景，同样能实现清空即时重置的效果。

内容的提问来源于stack exchange，提问作者ItecStudent