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

Question

我希望能够从 react 虚拟化表中一次选择多行，可以通过单击并拖动，或按住 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)
        }
    }

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