React中MUI Data Grid电话号码字段格式化属性咨询

在MUI Data Grid中没有直接对应HTML pattern属性的配置项，要实现电话号码的格式校验和格式化，可通过以下两种常用方式：

方式一：使用preProcessEditCellProps做提交前校验 #

该方法能在编辑单元格的内容提交前验证格式，不符合规则时可标记错误并给出提示：

const columns = [
  // 其他列配置...
  {
    field: "phone",
    headerName: "phone",
    width: 180,
    editable: true,
    preProcessEditCellProps: (params) => {
      const phonePattern = /^\d{3}-\d{3}-\d{4}$/;
      const isValid = phonePattern.test(params.props.value);
      return {
        ...params.props,
        error: !isValid,
        helperText: isValid ? "" : "请输入XXX-XXX-XXXX格式的电话号码",
      };
    },
  },
];

方式二：自定义editComponent使用带pattern的输入框 #

通过自定义编辑组件，直接使用MUI TextField并配置pattern属性，实现和原生HTML输入框一致的校验逻辑：

import TextField from '@mui/material/TextField';

const columns = [
  // 其他列配置...
  {
    field: "phone",
    headerName: "phone",
    width: 180,
    editable: true,
    editComponent: (params) => {
      const phonePattern = /^\d{3}-\d{3}-\d{4}$/;
      const isValid = params.value ? phonePattern.test(params.value) : true;
      return (
        <TextField
          fullWidth
          value={params.value || ""}
          onChange={(e) => params.onChange(e.target.value)}
          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
          error={!isValid}
          helperText={!isValid ? "格式错误，应为XXX-XXX-XXXX" : ""}
        />
      );
    },
  },
];

官方文档参考 #

MUI官方文档的「Data Grid - Cell Editing」章节，详细介绍了自定义编辑组件、输入校验的实现方案，包括preProcessEditCellProps的使用场景和自定义editComponent的具体方法。

内容的提问来源于stack exchange，提问作者fatemeh lohrasbi