对于 react-bootstrap-table2，您如何将所有复选框项目默认为选中？答案

【问题标题】：For react-bootstrap-table2, how do you default all the checkbox items to selected?对于 react-bootstrap-table2，您如何将所有复选框项目默认为选中？
【发布时间】：2020-07-15 21:07:30
【问题描述】：

如果我有一个数据项表，并且想要选中所有复选框？

当页面加载并显示表格时，应检查所有带有复选框的表格项。

<BootstrapTable selectRow={{ mode: 'checkbox', clickToSelect: true}} />

【问题讨论】：

标签： reactjs checkbox bootstrap-table react-bootstrap-table

【解决方案1】：

经过一番挖掘，我找到了答案。

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html#selectrowonselectall-function

react-bootstrap-table2 有一个函数...selectRow.onSelectAll - [Function]

const selectRow = {
 mode: 'checkbox',
 onSelectAll: (isSelect, rows, e) => {
   if (isSelect && SOME_CONDITION) {
     return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
   }
 }
};



onSelectAll = ( isSelected ) => {
    if ( isSelected ) {
        return this.props.myReducer.myDataItems.map( row => row.DATA_TABLE1 );
    } else {
        return [];
    }
}

然后 selectRow.selected - [数组] selectRow.selected 允许您在表上进行默认选择。我使用了这个函数并传入了'isSelected: true'

 <BootstrapTable
   classes={styles.myDataGrid}
   striped hover
   keyField="DATA_TABLE1"
   data={invalidCrashes}
   selectRow={{ mode: 'checkbox', clickToSelect: true, selected: this.onSelectAll( { 
   isSelected: true } )  }}                                                                         
  />

传入 'isSelected: true' 默认所有复选框都呈现为 'selected'

【讨论】：