使用 React-Table 选择多行？ （Shift + 单击）

Posted 2023-02-22

【中文标题】使用 React-Table 选择多行？ （Shift + 单击）

【英文标题】：Selecting multiple rows with React-Table? (Shift + Click)

【发布时间】：2019-08-11 04:11:00

【问题描述】：

有谁知道用 React-Table 选择多行的方法。假设我们希望单击一行中的一个单元格，然后按 SHIFT，然后选择另一行，也许用 CSS 对选定的行进行颜色编码？这甚至可能吗？

【问题讨论】：

您找到解决方案了吗？

【参考方案1】：

我找到了一种方法。如果您有任何问题，请告诉我。基本上只需要自己实现。

   state = 
    selected: null,
    selectedRows: [],
  

  previousRow = null;

  handleClick = (state, rowInfo) => 
    if (rowInfo) 
      return 
        onClick: (e) => 
          let selectedRows = [];
          // if shift key is being pressed upon click and there is a row that was previously selected, grab all rows inbetween including both previous and current clicked rows
          if (e.shiftKey && this.previousRow) 
            // if previous row is above current row in table
            if (this.previousRow.index < rowInfo.index) 
              for (let i = this.previousRow.index; i <= rowInfo.index; i++) 
                selectedRows.push(state.sortedData[i]);
              
            // or the opposite
             else 
              for (let i = rowInfo.index; i <= this.previousRow.index; i++) 
                selectedRows.push(state.sortedData[i]);
              
            
           else 
            // add _index field so this entry is same as others from sortedData
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
            this.previousRow = rowInfo;
          
          this.setState( selected: rowInfo.index, selectedRows )
        ,
        style: 
          // check index of rows in selectedRows against all rowInfo's indices, to match them up, and return true/highlight row, if there is a index from selectedRows in rowInfo/the table data
          background: this.state.selectedRows.some((e) => e._index === rowInfo.index) && '#9bdfff',
        
      
     else 
      return