react+antd的按钮实现表格搜索

在React + Antd框架中，实现表格搜索功能通常会利用Antd提供的Table组件和Form组件。下面是一个简化的示例步骤：

1. 首先，引入必要的依赖：

import { Table, Input } from 'antd';

2. 定义状态来存储搜索关键字（假设名为`searchKey`）：

const [searchKey, setSearchKey] = useState('');

3. 创建一个处理搜索事件的函数：

const handleSearch = (e) => {
  setSearchKey(e.target.value);
};

4. 使用Input组件创建搜索框，并添加onChange事件监听器：

<Input placeholder="搜索" onChange={handleSearch} />

5. 将搜索关键字应用到Table的columns属性的过滤条件上：

const columns = [
  // ...
  {
    title: '列名',
    dataIndex: 'dataIndex', // 表格数据的字段
    filters: [
      { text: '', value: '' }, // 空选项
      { text: searchKey, value: searchKey },
    ],
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder="请输入搜索内容"
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys([e.target.value])}
          onPressEnter={() => confirm()}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button type="primary" onClick={() => confirm()} icon="search">
          搜索
        </Button>
      </div>
    ),
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
  },
  // ...
];

6. 在Table组件中，传入`columns`数组。