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

Question

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

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

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

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

我找到了这个link，但我不太确定如何让它工作，因为我不知道从哪里可以得到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),
  ...