如何使用 ctrl 和 Shift 单击在 React-table 中多选表格行？答案

【问题标题】：How to multiple select the table row in React-table using the ctrl And Shift Click?如何使用 ctrl 和 Shift 单击在 React-table 中多选表格行？
【发布时间】：2022-07-11 15:15:59
【问题描述】：

代码：-

<table {...getTableProps()} className="table">
  <thead>
    {headerGroups.map((headerGroup) => (
      <tr {...headerGroup.getHeaderGroupProps()} id="header-fixed">
        {headerGroup.headers.map((column) => (
          <th {...column.getHeaderProps()}>{column.render("Header")}</th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody {...getTableBodyProps()}>
    {rows.map((row, i) => {
      prepareRow(row);
      return (
        <tr
          {...row.getRowProps({
            onClick: () => {
              console.log("ROW", row.id);
            }
          })}
          className="border_bottom"
          tabIndex={i}
          onKeyDown={(e) => handleKeyDown(e, i)}
          onLoad={() => active(i)}
          ref={i === 0 ? myRef : null}
        >
          {row.cells.map((cell) => {
            return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
          })}
        </tr>
      );
    })}
  </tbody>
</table>

我想当用户用 shift + 鼠标点击第一行然后最后一行 btw 他们所有行都用行 id 选择时？这可能吗？

请帮忙....

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

我也需要这个功能，但找不到很好的解决方案。我遇到的问题是我无法保存之前选择的行，这是多选计算所必需的。我最终使用useRowState 钩子来保存这个值。我确信这不是这个钩子的预期用途，但至少它有效。我希望有人也可以使用该实现：

Cell: (cellProps: CellProps<TaskData>) => {
        const { row, toggleRowSelected, setRowState, state } = cellProps;
        
        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
            const prevSelectedRow = state.rowState?.prevSelectedRow;
            if (event.target.checked) {
                setRowState(['prevSelectedRow'], row.id[0]);
                toggleRowSelected(row.id, true);
            } else {
                setRowState(['prevSelectedRow'], undefined);
                toggleRowSelected(row.id, false);
            }
            if ((event.nativeEvent as PointerEvent)?.shiftKey && prevSelectedRow){
                const current = parseInt(row.id);
                const previous = parseInt(prevSelectedRow.toString());
                if (previous < current) {
                    for (let i = previous; i < current; i++) {
                        toggleRowSelected(i+'', true);
                    }
                } else {
                    for (let i = current; i > previous; i++) {
                        toggleRowSelected(i+'', true);
                    }
                }
            }
        }
        return <input checked={state.selectedRowIds[row.id] ?? false} onChange={handleChange} type={'checkbox'}/>
    },

【讨论】：