javascript - 当列上有渲染时，getColumnSearchProps 不起作用

Question

我有一个来自 antd 的表，我使用 getColumnSearchProps 按列搜索数据，但是当我使用具有渲染方法的列执行此操作时，数据未显示，当我将 getColumnSearchProps 放在渲染方法上方时，数据显示但有当我搜索某些东西时没有价值。这是代码，我希望有人可以帮助我找到修复程序。谢谢。

const daily_sales = [
{
  title: "Agent",
  key: "agent",
  render: (item) => <p>{ item.username } </p>,
  ...getColumnSearchProps("agent"),
  
},
{
  title: "Sales",
  key: "sales",
  render: (item) => {
    return (
      <p>
        {
          calculateWinnersAndWinnings(
            daily_bets?.serverConfigs,
            daily_bets?.results,
            item.bets
          ).totalSales
        }
      </p>
    );
  },
  ...getColumnSearchProps("sales"),
}];

这是 getColumnSearchProps 的代码：

const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
  setSelectedKeys,
  selectedKeys,
  confirm,
  clearFilters,
}) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={searchInput}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={(e) =>
        setSelectedKeys(e.target.value ? [e.target.value] : [])
      }
      onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
      style={{ width: 188, marginBottom: 8, display: "block" }}
    />
    <Space>
      <Button
        type="primary"
        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90 }}
      >
        Search
      </Button>
      <Button
        onClick={() => handleReset(clearFilters)}
        size="small"
        style={{ width: 90 }}
      >
        Reset
      </Button>
    </Space>
  </div>
),
filterIcon: (filtered) => (
  <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
  record[dataIndex]
    ? record[dataIndex]
      .toString()
      .toLowerCase()
      .includes(value.toLowerCase())
    : "",
onFilterDropdownVisibleChange: (visible) => {
  if (visible) {
    setTimeout(() => searchInput.current.select(), 100);
  }
},
render: (text) => (searchedColumn === dataIndex ? text : text), });

标签： javascriptreactjsreact-hooksantd