在 cellEditable 材质表上，如何限制用户输入负数？

Posted 2023-02-22

【中文标题】在 cellEditable 材质表上，如何限制用户输入负数？

【英文标题】：On an cellEditable material-table, how to restrict the user from entering negative number?

【发布时间】：2021-06-11 03:03:45

【问题描述】：

我在我的项目中使用可编辑的材料表单元格。我想限制用户在该字段中输入否定的 no。另外，抛出错误验证。如何实现？

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);
          );
        
      
    />

【参考方案1】：

Material-table 通过列支持validation。您必须在列中添加验证键，然后根据您的要求进行验证。例如：

columns=[
    
          title: 'Name', field: 'name',  validate: rowData => rowData.name === '' ? 'Name cannot be empty' : ''
    ,     
]

如果名称为空，上述代码将报错。您可以对案例中所需的单元格执行相同的操作。

【讨论】：

嗨。我看到它在代码中不起作用......你可以在codesanbox中添加它并检查：codesandbox.io/s/material-demo-forked-h1f8d?file=/…

title: "Surname", field: "surname", initialEditValue: "initial edit value", validate: rowData => rowData.surname === '' ? 'Surname cannot be empty' : '' ,

是的，我试过了......但我正在使用 cellEditable，但它不起作用

我看到了，但没有帮助