无法将 FixedSizeList (react-window) 组件与 antd 传输组件集成

编程问答 2022-05-12

问题描述

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. 选定的元素移动到正确的存储桶，但不会被取消选中。

解决方法

似乎您缺少传递 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,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')
);

也为您推荐一个 link。

祝你好运！

antdjavascriptreact-windowreactjsreactjs