Ant Design表搜索定制

Question

我使用ant设计表，并使用getColumnSearchProps进行column-driven搜索。我希望将search input放在列的标题中。但是我不知道如何处理对此列和输入的搜索？

数据：

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Joe Black',
    age: 42,
    address: 'London No. 1 Lake Park',
  }]

以下是我的专栏：

const columns = [
    {
        title: (
            <>
                <Search
                    placeholder="search"
                    prefix={<CPIcon type="search" />}
                    onChange={??????????????}
                />
                name
            </>
        ),
        dataIndex: 'name',
        key: '1',
        align: 'right',
        render: text => (<h1>{text}</h1>)
    },

    other columns ...
]

在render中：

<Table columns={columns} dataSource={data} />

Answer 1

在String.includes()中使用Array.filter()

另外，请注意，Input.Search只添加了两个属性：onSearch和enterButton，因此不使用任何额外的道具来呈现它是没有意义的。

export default function App() {
  const [dataSource, setDataSource] = useState(data);
  const [value, setValue] = useState('');

  const FilterByNameInput = (
    <Input
      placeholder="Search Name"
      value={value}
      onChange={e => {
        const currValue = e.target.value;
        setValue(currValue);
        const filteredData = data.filter(entry =>
          entry.name.includes(currValue)
        );
        setDataSource(filteredData);
      }}
    />
  );

  const columns = [
    {
      title: FilterByNameInput,
      dataIndex: 'name',
      key: '1'
    }
  ];

  return (
    <FlexBox>
      <Table columns={columns} dataSource={dataSource} />
    </FlexBox>
  );
}

​

​

Answer 2

另一个答案真的有效吗？我实际上使用了一个额外的useCallback函数：

export default () => {
  const [data, setData] = useState(null)
  const [val, setVal] = useState('')

  const filterVals = useCallback((e) => {
    const currValue = e.target.value
    setVal(currValue)
    const filteredVals = data.filter(entry =>
      entry.val.includes(currValue)
    )
    setData(filteredVals)
  }, [loading])

  const columns = [
    {
      title:
        <Input
          placeholder="lalaland"
          value={val}
          onChange={filterVals}
        />,
      dataIndex: 'val',
    },
  ]

  return (
    <Table
      bordered
      dataSource={data}
      columns={columns}
    />
  )
}