如何在 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 {};
    };

這對我有用。