有条件的onSelectAll在react-bootstrap-table-next中? 案例:逻辑: UI实现: selectRow的防御力: handleOnSelect实现: handleOnSelectAll实现:

问题描述

我正在尝试在react-bootstrap-table-next中实现条件选择和selectAll。 意味着我想在条件为真时禁用selectRow元素。

案例:

用户上传文件-file has an Upload DateTime-除非经过15分钟,否则不允许他们删除文件

逻辑:

moment() >= moment(row.upload_date).add(15,'minutes')

UI实现:

enter image description here

selectRow的防御力:

const selectRow = {
mode: "checkBox",selected: selectedFiles.id,onSelect: (row,isSelect,rowIndex,e) => {
  if ( moment() >= moment(row.upload_date).add(15,'minutes')) {
    handleOnSelect(row,isSelect);
  } else {
    return false;
  }
},onSelectAll:(rows,isSelected) => {
  if(isSelected) {
    for(let i = 0 ; i < rows.length ; i++){
      if (moment() >= moment(rows[i].upload_date).add(15,'minutes')){
        handleOnSelectAll(rows[i],isSelected);
      } else {
        return false;
      }
    }
  } else {
    return false;
  }
},selectionHeaderRenderer: ({ indeterminate,...rest }) => (
  <Form.Check
    custom
    type="checkBox"
    label={(<></>)}
    ref={ (input) => {
      if (input) input.indeterminate = indeterminate;
    } }
    { ...rest }
  />
),selectionRenderer: ({ mode,...rest }) => (
    <Form.Check 
      custom
      type="checkBox"
      label={(<></>)}
      type={ mode } { ...rest } 
    />
)
};

handleOnSelect实现:

const handleOnSelect = (row,isSelect) => {
// Selected file
if (isSelect) {
  if (
    !selectedFiles.length ||
    (selectedFiles.length && selectedFiles[0].id !== row.id)
  ) {
    setSelectedFiles([...selectedFiles,row]);
  }
}
// deselected file
else {
  setSelectedFiles(selectedFiles.filter((x) => x.id !== row.id));
}
};

handleOnSelect工作正常。

enter image description here

handleOnSelectAll实现:

const handleOnSelectAll = (isSelected,rows) => {
console.log(rows)
let files = rows.map((r) => r);
console.log(files)
// Selected all files
if (isSelected) {
  setSelectedFiles(files);
}
// deselected all files
else {
  setSelectedFiles([]);
}
};

handleOnSelectAll无法正常工作。

enter image description here

当我们单击全选时,它不应检查最近上传文件。 我已经参考过react-bootstrap-table-next api文档,但未能实现。

请指导我,谢谢

解决方法

请参阅react-bootstrap-table2 Styorybook

handleOnSelectAll = (isSelect,rows) => {
 if (isSelect) {
  return rows.filter(r => r.id >= 3).map(r => r.id);
 }
}

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...