我如何獲得react-data-grid中“全選”復選框的句柄

Question

當在react-data-grid中選中“全選”復選框時，我想編寫一些自定義邏輯。 那么，當用戶單擊該復選框時，如何獲得該“全選”復選框的句柄？

這是一些react-data-grid示例的鏈接http://adazzle.github.io/react-data-grid/#/和倉庫的鏈接https://github.com/adazzle/react-數據網格

在我的render（）中，我定義了react-data-grid，如下所示。
呈現表格時，該表格看起來像此反應數據網格演示

let dataGrid = <ReactDataGrid
            ref={node => this.grid = node}
            onGridSort={this.handleGridSort}
            enableCellSelect={true}
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this.getSize()}
            minWidth={this.state.width}
            minHeight={this.state.height}
            rowKey="id"
            rowHeight={90}
            headerRowHeight={35}
            rowSelection={{
                showCheckbox: true,
                enableShiftSelect: true,
                onRowsSelected: this.onRowsSelected,
                onRowsDeselected: this.onRowsDeselected,
                selectBy: {
                    indexes: this.state.selectedIndexes
                }
            }
            }
            emptyRowsView={EmptyRowsView}
        >
        </ReactDataGrid>;

Answer 1

您可以通過計算選擇多少個來實現。

由於onRowsSelected: this.onRowsSelected調用選定的行數，因此可以在onRowsSelected()函數中創建邏輯。

您的函數應如下所示：

onRowsSelected = (rows) => {
    this.setState({selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx))});

    let rowIndexes = rows.map(r => r.rowIdx);

    let totalSelected = rowIndexes.length + this.state.selectedIndexes.length;

    if(this.state.rows.length == totalSelected){
      console.log('All rows have been selected');
      //You argument here when SelectAll
    }
  };

Answer 2

ReactDataGrid公開了一個引用，我們可以在我們的自定義組件中訪問它。 這樣我們可以訪問“全選”復選框。

<ReactDataGrid
            ref={node => this.grid = node}
            ... >
</ReactDataGrid>;

在您的自定義組件中，我們可以通過以下方式訪問“全選”復選框：

this.grid.selectAllCheckbox.checked; //根據已檢查/未檢查返回true / false