MUI DataGrid编辑后单元格格式问题：如何将字符串转为数字？

首先明确：valueFormatter 仅负责界面显示格式的转换，不会修改DataGrid内部存储的原始数据。所以编辑完成后从onRowEditStop拿到的依然是输入时的字符串类型，这就是它没生效的原因。

下面是几种可行的解决方法：

方法一：在onRowEditStop事件中手动转换类型 #

直接在事件回调里处理编辑后的行数据，转换指定字段为数字类型后再执行保存逻辑：

const handleRowEditStop = (params, event) => {
  // 阻止默认保存流程，避免直接存入原始字符串
  event.defaultMuiPrevented = true;

  // 复制行数据并转换目标字段
  const processedRow = {
    ...params.row,
    // 根据你的实际字段名修改，比如price、count
    price: Number(params.row.price),
    count: parseInt(params.row.count, 10) // 整数用parseInt更严谨
  };

  // 这里替换成你的实际保存逻辑，比如更新数据源
  updateTableData(processedRow);

  // 手动结束当前行的编辑状态
  params.api.setRowEditingMode({ id: params.id, mode: 'view' });
};

方法二：用preProcessEditCellProps针对列处理 #

这个方法会在单元格编辑完成、数据提交到DataGrid前触发，适合针对特定列做类型转换，更精准：

const columns = [
  {
    field: 'price',
    headerName: '单价',
    editable: true,
    // 处理该列的编辑值
    preProcessEditCellProps: (propsParams) => {
      return {
        ...propsParams.props,
        value: Number(propsParams.props.value) // 转换为数字类型
      };
    }
  },
  {
    field: 'stock',
    headerName: '库存',
    editable: true,
    preProcessEditCellProps: (propsParams) => {
      return {
        ...propsParams.props,
        value: parseInt(propsParams.props.value, 10)
      };
    }
  }
  // 其他列配置...
];

使用这个方法后，onRowEditStop中拿到的params.row里对应字段已经是数字类型了。

方法三：自定义编辑组件（复杂场景） #

如果需要限制输入内容（比如只能输入数字），同时确保存入数据为数字类型，可以自定义编辑单元格：

const columns = [
  {
    field: 'stock',
    headerName: '库存',
    editable: true,
    renderEditCell: (params) => {
      return (
        <TextField
          type="number"
          inputProps={{ min: 0 }} // 限制输入非负整数
          value={params.value || ''}
          onChange={(e) => {
            // 直接将输入值转为数字后存入DataGrid
            params.api.setEditCellValue({
              id: params.id,
              field: params.field,
              value: e.target.value ? Number(e.target.value) : 0
            });
          }}
          onBlur={() => {
            params.api.commitCellEdit({ id: params.id, field: params.field });
          }}
        />
      );
    }
  }
];

这种方式从输入源头就确保了数据类型，避免后续转换的麻烦。

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