如何在MUI X Data Grid验证不通过时禁止用户继续输入单元格内容？

你当前使用preProcessEditCellProps仅能标记输入错误，但无法阻止用户继续输入超出限制的内容。要实现「data字段最多输入10个字符，达到上限后不再记录新字符」的需求，可以通过自定义编辑组件结合输入限制来实现，同时保留验证提示逻辑。

修改后的完整代码如下：

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import TextField from "@mui/material/TextField";

export default function FairValuePricingLatest({ rows, handleCellEdit }) {
  const columns = [
    {
      field: "id",
      headerName: "Id"
    },
    {
      field: "data",
      headerName: "Data",
      editable: true,
      // 自定义编辑组件，直接限制输入长度
      editComponent: (params) => {
        return (
          <TextField
            value={params.value || ""}
            onChange={(e) => params.onChange(e.target.value.slice(0, 10))}
            inputProps={{ maxLength: 10 }} // 输入框原生限制长度
            error={params.error}
            helperText={params.error ? "最多输入10个字符" : ""}
          />
        );
      },
      // 数据提交前的二次校验与截断
      preProcessEditCellProps(params) {
        const inputValue = params.props.value;
        const isInvalid = inputValue.length > 10;
        if (isInvalid) {
          return { 
            ...params.props, 
            error: true,
            value: inputValue.slice(0, 10) // 强制截断超出内容
          };
        }
        return params.props;
      }
    }
  ];

  return (
    <DataGrid
      editMode="cell"
      experimentalFeatures={{ newEditingApi: true }}
      processRowUpdate={handleCellEdit}
      rows={rows}
      columns={columns}
    />
  );
}

关键实现说明： #

• 自定义编辑组件：通过editComponent替换默认输入框，使用inputProps={{ maxLength: 10 }}让输入框原生限制输入长度，同时在onChange事件中手动截断内容，避免用户通过粘贴等方式绕过输入框限制。
• 数据校验与修正：preProcessEditCellProps保留验证逻辑，同时对超出长度的内容进行强制截断，确保最终提交到processRowUpdate的数据符合规则，避免后端收到非法数据。
• 错误提示：同步保留错误状态与提示文本，让用户清晰知晓输入限制。

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