如何为MUI X Data Grid数字列设置输入值的最小最大值？

因为你启用了experimentalFeatures.newEditingApi: true，旧的配置项（比如columnInputProps）不再适用于新的编辑单元格组件，以下是两种有效的实现方式：

方法一：直接通过editCellProps传递范围参数 #

新编辑API下，数字列的默认编辑组件是GridEditNumberCell，它支持直接接收min、max属性，这些属性会同步到内部的数字输入框，同时限制上下箭头控件的操作范围：

{
  field: "count",
  headerName: "Count",
  type: "number",
  editable: true,
  // 直接传递min/max给编辑单元格组件
  editCellProps: {
    min: 0,
    max: 10
  }
}

方法二：自定义编辑单元格实现更严格的校验 #

如果需要在输入时实时修正无效值（比如输入负数自动改为0），可以自定义renderEditCell：

import { GridEditNumberCell } from '@mui/x-data-grid-pro';

// 列定义
{
  field: "count",
  headerName: "Count",
  type: "number",
  editable: true,
  renderEditCell: (params) => {
    const handleChange = (event) => {
      let value = parseInt(event.target.value, 10);
      // 超出范围时自动修正
      if (isNaN(value)) value = 0;
      if (value < 0) value = 0;
      if (value > 10) value = 10;
      // 更新编辑单元格的值
      params.api.setEditCellValue({
        id: params.id,
        field: params.field,
        value,
      });
    };

    return (
      <GridEditNumberCell
        {...params}
        inputProps={{ min: 0, max: 10 }}
        onChange={handleChange}
      />
    );
  }
}

补充：提交时的最终校验 #

为了防止用户通过粘贴等绕过输入限制的操作，建议在processRowUpdate中添加最终校验：

const processRowUpdate = (newRow) => {
  if (newRow.count < 0 || newRow.count > 10) {
    throw new Error('Count必须在0到10之间');
  }
  // 这里写入你的提交逻辑（比如调用后端API）
  return newRow;
};

为什么之前的写法失败？ #

你尝试的columnInputProps、inputProps等配置项，要么是针对旧版编辑API，要么是用于列过滤组件的输入框配置，并不适用于新编辑API下的单元格编辑组件。启用newEditingApi后，需要使用editCellProps或自定义renderEditCell来配置编辑单元格的行为。

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