React使用AntD Table时如何获取输入框值传入按钮点击事件实现筛选

你可以通过React受控组件管理搜索框输入值的方式实现需求，具体代码和逻辑如下：

• 首先声明两个状态，分别存储搜索框输入的关键词、表格需要展示的过滤后数据
• 给文本框绑定值和输入事件，实时把用户输入的内容同步到状态中
• 点击搜索按钮时直接拿状态里存储的关键词过滤原始数据即可

import { useState } from 'react';
import { Table } from 'antd';

// 你的原始学生数据，可替换为自己的接口返回数据
const student = [
  { name: '张三', id: 1 },
  { name: '李四', id: 2 },
  // 其余数据项
];
const columns = [/* 你自己的表格列配置 */];

function YourComponent() {
  // 存储搜索框输入的关键词
  const [searchKeyword, setSearchKeyword] = useState('');
  // 存储表格要渲染的过滤后数据，默认展示全部原始数据
  const [searchedName, setSearchedName] = useState(student);

  const handleSearch = () => {
    // 搜索关键词为空时直接展示全部数据
    if (!searchKeyword.trim()) {
      setSearchedName(student);
      return;
    }
    // 按姓名字段做模糊匹配，加toLowerCase实现不区分大小写搜索，不需要可直接去掉
    const filteredList = student.filter(item => 
      item.name.toLowerCase().includes(searchKeyword.toLowerCase())
    );
    setSearchedName(filteredList);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search here"
        style={{ marginBottom: 8, marginRight: 8 }}
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
      />
      <input
        type="submit"
        value="Search"
        onClick={handleSearch}
        style={{ marginBottom: 8 }}
      />
      <Table columns={columns} dataSource={searchedName} />
    </div>
  );
}

export default YourComponent;

如果你需要输入过程中实时过滤，不需要点击搜索按钮触发，只需要把过滤逻辑放到input的onChange事件中即可。如果一定要用match方法实现匹配，要注意对用户输入的特殊正则字符做转义处理，普通搜索场景用includes方法更简单安全。

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