0

antd 是很棒的组件库，但是在将 react-window 与 Transfer 组件集成时我面临一些挑战。

我正在尝试在 Transfer 组件中呈现一个巨大的列表，并且由于 antd 3.x Transfer 组件随着项目长度的增加而滞后，所以我想到了将 react-window 组件与 Transfer 组件一起使用。

在链接中：- https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js

我正在尝试将 react-window 与传输组件集成，但无法设置 antd 传输组件中可用的一些默认行为。要查看 antd 组件的默认行为，我们可以通过在代码库中将 perfMode 设置为 false 来检查。

将 FixedSizeList 组件与 Transfer 组件一起使用时，某些基本功能（例如 selectAll 等）不起作用。

任何可以为我指明正确方向的帮助表示赞赏。

重现步骤：-

  1. 访问https://stackblitz.com/edit/react-ofcadv-gcds33?file=index.js
  2. 要启用虚拟化，请转到 index.js 的第 126 行并将 perfMode 设置为 true。
  3. 选择一些元素并单击右箭头。
  4. 选定的元素移动到正确的存储桶，但不会被取消选中。
4

1 回答 1

0

似乎您缺少传递 selectedKeys。

看看下面完全可行的解决方案：

const { Transfer } = antd;
const ReactDragListView = window["react-drag-listview"];

const dataSource = [];
for (let i = 0; i < 20; i++) {
  dataSource.push({
    key: i.toString(),
    title: `Item ${i + 1}`
  });
}

const targetKeys = dataSource
  .filter(item => +item.key % 3 > 1)
  .map(item => item.key);

class TransferDemo extends React.Component {
  state = {
    targetKeys,
    selectedKeys: []
  };

  handleChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({
      selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]
    });
  };

  getDragProps = () => ({
    onDragEnd: (fromIndex, toIndex) => {
      const targetKeys = [...this.state.targetKeys];
      const item = targetKeys.splice(fromIndex, 1)[0];
      targetKeys.splice(toIndex, 0, item);

      this.handleChange(targetKeys);
    },
    nodeSelector: ".ant-transfer-list:last-child .ant-transfer-list-content > div"
  });

  render() {
    const { targetKeys, selectedKeys } = this.state;

    return (
      <div>
        <ReactDragListView {...this.getDragProps()}>
          <Transfer
            dataSource={dataSource}
            titles={["Source", "Target"]}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onChange={this.handleChange}
            onSelectChange={this.handleSelectChange}
            render={item => item.title}
            listStyle={{ height: 300 }}
          />
        </ReactDragListView>
      </div>
    );
  }
}

ReactDOM.render(
  <TransferDemo />,
  document.getElementById('root')
);

也为您推荐一个链接。

祝你好运！

于 2021-04-15T15:15:41.600 回答