如何覆盖反应材料表中的单元格组件？答案

【问题标题】：How to override cell component in react material table?如何覆盖反应材料表中的单元格组件？
【发布时间】：2021-06-12 04:23:59
【问题描述】：

我在我的项目中使用材料表 cellEditable，我想覆盖单元格组件以限制用户在字段中输入负号。另外，抛出错误验证。我能够在“可编辑”中实现这一点，但不能在 cellEditable 上实现这一点如何实现？

https://codesandbox.io/s/material-demo-forked-h1f8d?file=/demo.js:609-979

<MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            console.log("newValue: " + newValue);
            setTimeout(resolve, 1000);
          });
        }
      }}
    />

【问题讨论】：

标签： javascript reactjs ecmascript-6 frontend material-table

【解决方案1】：

我还没有找到如何限制甚至输入负数的方法，但我已经能够限制保存它。此外，这会引发警报，让您知道您正在尝试将负数保存到 Year 字段中。

onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
        return new Promise((resolve, reject) => {
            if (columnDef.field === "birthYear" && newValue < 0) {
                alert("You entered a negative year....");
                return reject();
            }
            setData((prev) =>
                prev.map((item, i) => {
                    if (rowData.tableData.id === i)
                        item[columnDef.field] = newValue;
                    return item;
                })
            );
            setTimeout(resolve(), 1000);
        });

请注意，此代码还允许您成功更新所有其他字段。

沙盒：https://codesandbox.io/s/material-demo-forked-x74m1?file=/demo.js

【讨论】：