如何覆盖 React material table 中的单元格组件？

Question

我在我的项目中使用 material table cellEditable，我想覆盖单元格组件以限制用户在该字段中输入负号。另外，抛出错误验证。我可以在“editable”中实现，但不能在 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);
          });
        }
      }}
    />

Answer 1

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

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

如何覆盖 React material table 中的单元格组件？

How to override cell component in react material table?

javascript

frontend

ecmascript-6

reactjs

material-table