时间戳

首页 > 解决方案 > React AntD - 过滤后选择重置

reactjs - React AntD - 过滤后选择重置

问题描述

我有一个表，其中包含您可以选择的项目列表： 在此处输入图像描述

在任何页面上选择项目都可以正常工作。我最近介绍了过滤结果的上述搜索选项。但是，如果我过滤然后单击以选择一个项目，它将删除先前设置的选择。我试图通过选择数组，但似乎无法链接这些点。

过滤器代码：

        filterIcon: <span/>,
        filterDropdownVisible: true,
        filterDropdown: (
          <div className={styles.listFilterDropdownModal}>
            <Input
              placeholder="Search list..."
              value={listModalFilterString}
              onChange={(ev) => dispatch({
                type: "jobs/setListModalFilterString",
                listModalFilterString: ev.target.value,
              })}
            />
          </div>
        ),

这基本上被传递到数据源中：

       dataSource={(list || [])
        .filter(strategy => {
          // console.log(list);
          // return true;
          return list.name.toLowerCase().indexOf(listModalFilterString.toLowerCase()) !== -1
        })
        .map(list => ({
        key: `list_${list.id}`,
        ...list,
      }))}

然后是行选择代码 - 我认为这会导致问题：

       rowSelection={{
        selectedRowKeys: (listIds || defaultListIds).map(k => `list_${k}`),
        onSelect: (r, s, selectedRows) => dispatch({
          type: "job/setListIds",
          listIds: selectedRows.map(row => row.id),
        }),
      }}

上面调用的函数就是这样做的：

setListIds: (state, {listIds}) => ({...state, listIds})

标签： reactjsantd

解决方案

你可以使用filterDropdown喜欢

  filterDropdown: ({
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
        }) => {
            return (
                <div
                    style={{
                        padding: "12px",
                        background: "#fff",
                    }}
                >
                    <Input
                        placeholder={`Search ${dataIndex}`}
                        value={selectedKeys[0]}
                        onPressEnter={() => confirm()}
                        onChange={(e) =>
                            setSelectedKeys(
                                e.target.value ? [e.target.value] : []
                            )
                        }
                        style={{ marginBottom: 8, display: "block" }}
                    />
                    <Space>
                        <Button
                            type="primary"
                            onClick={() => confirm()}
                            icon={<SearchOutlined />}
                            size="small"
                            style={{ width: 90 }}
                        >
                            Search
                        </Button>
                        <Button
                            onClick={() => {
                                clearFilters();
                                confirm();
                            }}
                            size="small"
                            style={{ width: 90 }}
                        >
                            Reset
                        </Button>
                    </Space>
                </div>
            );
        },

推荐阅读