如何在 react-bootstrap-table2 中动态禁用一行的复选框？

Question

我想实现我当前沙盒中的一些东西：

目前我已经对 nonSelectable: [1, 2] 进行了硬编码，因此它会使第 1 行和第 2 行无法选择。

现在我想根据文件的 createdByID 使行不可选择。

如果文件的 createdByID 与用户的登录 ID 相同，则可以选择，否则不能，但是 我现在的问题 是如何我是否获取每一行的数据并将它们的 createdByID 与用户的 ID 进行比较，然后 return 需要将其复选框禁用的索引作为 nonSelectable 道具的数组？

我找到了这个 link 但我不太确定如何让它工作，因为我不确定从哪里获得 key。

CodeSandbox Demo

Answer 1

您可以创建一个函数，以编程方式为您生成 nonSelectable 数组。例如

function getNonSelectableRows(rows, userLoginId) {
  return rows
    .filter((r) => r.createdByID !== userLoginId)
    .reduce((acc, r) => {
      acc.push(r.fileID);
      return acc;
    }, []);
}

然后为selectRow.nonSelectable

调用函数

function App() {
  ...
  // I don't see the user login id in your code.
  // Thus I just add it as a constant at the top.
  const userLoginId = '200201';
  const [files] = useState([
    {
      fileID: 1,
      fileName: "Cardio Care Awareness Month",
      createdByID: "100101"
    },
    {
      fileID: 2,
      fileName: "MEMO COMPULSORY TO",
      createdByID: "100101"
    },
    {
      fileID: 3,
      fileName: "MEMO 2021 Covid19 Vaccination Leave",
      createdByID: "200201"
    },
    {
      fileID: 4,
      fileName: "Human Cell",
      createdByID: "200201"
    }
  ]);

  const selectRow = {
    mode: "checkbox",
    // nonSelectable = [1, 2]
    nonSelectable: getNonSelectableRows(files, userLoginId),
  ...

如何在 react-bootstrap-table2 中动态禁用一行的复选框？

How to dynamically disable a row's checkbox in react-bootstrap-table2?

reactjs

react-bootstrap

react-bootstrap-table