reactjs - 定义 MUI DataGrid 数字列/单元格的最小和最大输入值

Question

我正在集成 MUI DataGrid Pro，如下所示:

<DataGridPro
  apiRef={apiRef}
  rows={rows || []}
  columns={columns}
  editMode="row"
  rowModesModel={rowModesModel}
  onRowModesModelChange={(newModel) => setRowModesModel(newModel)}
  processRowUpdate={processRowUpdate}
  onProcessRowUpdateError={handleProcessRowUpdateError}
  experimentalFeatures={{ newEditingApi: true }}
}}

在我的一个 type: number 列中，我只想输入 0 到 10 之间的值。应通过键入或使用 UI 向上/向下控件使输入无效。

我在此页面上看到了将 columnInputProps 添加到 GridColumn 的 API 选项，但找不到任何示例用法。我尝试了以下方法:

{
  field: "count",
  headerName: "Count",
  type: "number",
  editable: true,

  // columnInputProps: { min: 0, max: 10 }, // FAIL
  // columnInputProps: { inputProps: { min: 0, max: 10 } }, // FAIL
  // valueInputProps: { min: 0, max: 10 }, // FAIL
  // valueInputProps: { inputProps: { min: 0, max: 10 } }, // FAIL
  // inputProps: { min: 0, max: 10 }, // FAIL
},

我怀疑我滥用了这些功能，因为它们更关心过滤功能。

希望有人指出我在 MUI DataGrid 列上设置最小最大范围的正确方向。提前致谢!

Answer 1

您可以使用 renderEditCell 属性并直接传递 inputProps 来实现

{
      field: "count",
      headerName: "Count",
      type: "number",
      editable: true,
    
      renderEditCell: (params) => (
            <GridEditInputCell
              {...params}
              inputProps={{
                max: 10,
                min: 0,
              }}
            />
          ),
    
},