Reactjs 有条件地禁用物料表'；具有开关样式的s列

我有一个4-5列的材料表

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

函数的作用是：根据rawStatus值返回“disabled”。rawStatus值在onRowDelete（）中设置。promise。。见本帖末尾

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

我的“状态”列定义如下所示

{
      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"}
        />
      ),
    }

---

您的

isDeleted

函数正在返回字符串，但要禁用开关，我们应该返回true或false修改

isDeleted

，如下所示

const isDeleted=（data）=>{return data.rawStatus==“delete”？true:false；}

正如我在您的codesandbox中所看到的，现在您正在从

isDeleted

返回true或false，这是正确的，但下一个问题是您在

isDeleted

函数中的条件

返回数据。rawStatus==“删除”？真：假

但是在您的模式中，

rawStatus

没有值，这就是为什么它总是返回false，并且您的切换按钮没有被禁用

条件应该是

返回数据。记录状态==“删除”？真：假

更正代码沙盒
谢谢@techipank，已经尝试过了。。它不起作用。我猜API需要一个单词“disabled”来禁用开关，因此我返回了一个文本“disabled”perfect@techpank。。谢谢你发现我的错误。它现在可以工作了。你能创建一个沙盒并共享链接吗这里是sandbox链接@techipank有任何更新吗？用工作沙盒链接更新了我的答案有一个链接让我知道它是否工作了…如果工作了接受答案并关闭此票证
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);
                  }),