使用 Switch 样式有条件地禁用 material-table 的列

Question

我有一个包含 4-5 列的 material-table。

我允许用户使用 onRowAdd、onRowUpdate 和 onRowDelete 函数添加、编辑和删除行。一切似乎都运行良好，没有任何问题。唯一缺少的是 'status' 列的一些奇怪行为，它基本上是一个带有 Materil-ui 元素的开关。当用户删除一行时，状态列（Swtich 类型）仍处于启用状态，用户可以更改状态，从 UI 的角度来看这有点误导。即当用户删除了一行时，我希望禁用此 Swtich。我尝试了几个不同的选项，包括添加一个函数并从函数返回 'disabled' 文本，并按照下面的说明在列声明中使用它，但没有任何效果......有什么想法吗？

isDelete() 函数只是 returns 'disabled' 基于 rawStatus 值。 rawStatus 值在 onRowDelete() 承诺中设置。请参阅此 post

的末尾

const isDeleted = (data) => {
    return data.rawStatus === "delete" ? "disabled" : "";
  }

我的 'status' 列定义如下 ...

{
      field: "status",
      title: "Status",
      editable: "never",
      headerStyle: {
        width: 50,
        minWidth: 50,
        whiteSpace: "nowrap",
      },
      render: (data, id) => (
        <FormControlLabel
          control={
            <Switch
              disabled={isDeleted(data)}
              checked={data.status}
              onChange={(e) => changeStatus(data, e)}
              name="status"
              color="primary"
            />
          }
          label={data.status ? "Active" : "Disabled"}
        />
      ),
    }

我的 onRowDelete 函数如下所示，我将 rowStatus 元素值（在 API 中使用执行 required CRUD 操作)

onRowDelete: (oldData) =>
                  new Promise((resolve, reject) => {
                    setTimeout(() => {
                      const dataDelete = [...usersData];
                      const index = oldData.tableData.id;
                      if (oldData.recordStatus !== "existing") {
                        dataDelete.splice(index, 1);

                        setUsersData([...dataDelete]);
                      } else {
                        oldData.recordStatus = "delete";
                        oldData.disabled = true;
                        dataDelete[index] = oldData;
                        setUsersData([...dataDelete]);
                      }

                      resolve();
                    }, 1000);
                  }),

Answer 1

您的 isDeleted 函数正在返回字符串，但要禁用 Switch，我们应该返回 true 或 false 修改 isDeleted 如下

const isDeleted = (data) => { return data.rawStatus === "delete" ? true : false; }

正如我在你的 codesandbox 中看到的那样，你现在从 isDeleted 返回 true 或 false，这是正确的，但下一个问题是你在 isDeleted 函数中的条件，它被写为

return data.rawStatus==="delete"? true:false

但是在您的模式中 rawStatus 没有值，这就是它总是返回 false 并且您的切换按钮未被禁用的原因。

条件应该是

return data.recordStatus === "delete" ? true : false;

已更正 codesandbox link

使用 Switch 样式有条件地禁用 material-table 的列

conditionally disable material-table's column with Switch style

reactjs

material-ui

material-table