reactjs - 有没有办法在反应虚拟化表中选择多行？

Question

我希望能够一次从反应虚拟化表中选择多行，或者通过单击并拖动，或者按住 shift 从一个索引选择到另一个。我知道有一个onRowClick方法，我目前正在将它用于单行选择，但这还不够。有没有一种简单的方法可以做到这一点？

Answer 1

首先，您可以在每行的开头添加复选框以跟踪选定的行，然后您可以通过调用下面的复选框 onClick 函数一次选择多行。

const checkedData = []

 const selectRows = (obj) => {
        const already = checkedData.some(item => item.id === obj.id)
        if (already) {
            const index = checkedData.findIndex(item => item.id === obj.id)
            checkedData.splice(index, 1)
        } else {
            checkedData.push(obj)
        }
    }

通过这种方式，您还可以通过再次单击该行或取消选中复选框从数组中弹出特定行。

Answer 2

我实际上在相关线程上找到了答案。如果按下 shiftKey 并实现我自己的选择，我会从 onRowClick 方法检查事件。我将数据中的行添加到 selectedRows。“数据”来自道具。代码如下，希望对你有帮助。

const [previousSelectedRow, setPreviousSelectedRow] = useState();
const [selectedRows, setSelectedRows] = useState();

const handleRowClick = (info) => {

        let localSelectedRows = [];

        if (info.event.shiftKey && previousSelectedRow) {
            const previousSelectedRowIndex = data.findIndex(rowData => rowData.index = previousSelectedRow.index);
            const currentSelectedRowIndex = data.findIndex(rowData => rowData.index = info.index);
            if (previousSelectedRowIndex < currentSelectedRowIndex) {
                for (let i = previousSelectedRowIndex; i < currentSelectedRowIndex; i++) {
                    localSelectedRows.push(data[i);
                }
            } else {
                for (let i = currentSelectedRowIndex; i < previousSelectedRowIndex; i++) {
                    localSelectedRows.push(data[i]);
                }
            }
        } else {
            setPreviousSelectedRow(info);
            localSelectedRows.push(info.rowData);
        }
        setSelectedRows(localSelectedRows); 
}