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

Question

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

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

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

如果文件的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),
  ...

Answer 2

 <BootstrapTable
  keyField='id'
  columns={columns}
  rowStyle={rowStyle}
 data={data}
/>

 const rowStyle = (row) => {
        if (row.your_col_name=== 'your_condition') {
            return { backgroundColor: 'gray', color: '#999999', pointerEvents: 'none', cursor: 'not-allowed' };
        }
        return {};
    };

这对我有用。