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

Question

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

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

现在我想根据filecreatedByID 使行无法选择。

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

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

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),
  ...