React MUI - 数据网格编辑单元格不起作用

Question

我在使用 Material-UI DataGrid 组件时遇到问题，特别是与单元格编辑和更新网格中的值有关。我尝试了几种不同的方法，但似乎都没有达到预期的效果

这是我到目前为止所做的尝试：

方法一：使用renderEditCell

在这种方法中，我实现了 renderEditCell 函数来呈现可编辑的文本字段。但是，我面临两个问题：

一次只能输入一个字符，每输入一个字符后数值都会重置。 DataGrid 不显示键入的值。 这是我的这种方法的代码片段：

// My function
const handleEditCellChange = (params) => {
    
    // const updatedRows = [...AssignmentData];
    // updatedRows[params.id][params.field] = params.value;
    // setAssignmentData(updatedRows);
    

    console.log(params);
    // Update the comment in the AssignmentData and make an API call to update the comment on the server.
    const updatedRows = [...AssignmentData];
    const rowIndex = updatedRows.findIndex((row) => row.id === params.id);
    updatedRows[rowIndex][params.field] = params.value;
}

// My column rendering

{
      field: 'teacher_comment',
      headerName: 'Teacher Comment',
      width: 300,
      editable: true,
      renderEditCell: (params) => {
        return <TextField
            variant="outlined"
            size="small"
            value={params.value}
            fullWidth
            onChange={(e) =>
              handleCommentChange(params.row.id, 'teacher_comment', e.target.value)
            }
          />
        ;
      },

方法 2：创建自定义编辑组件

在这种方法中，我创建了一个自定义编辑组件来处理单元格编辑。但是，我遇到了错误“TypeError：apiRef.current.setEditCellValue不是函数”，并且无法更新AssignmentData状态下的值。这是此代码的片段：

// My Function
function CustomEditComponent(props) {
  const { id, value, field, hasFocus } = props;
  const apiRef = useGridApiRef();
  const ref = React.useRef();

  React.useLayoutEffect(() => { 
    if (hasFocus) {
      ref.current.focus();
    }
  }, [hasFocus]);

  const handleValueChange = (event) => {
    const newValue = event.target.value; // The new value entered by the user
    apiRef.current.setEditCellValue({ id, field, value: newValue });
  };

  return <input ref={ref} type="text" value={value} onChange={handleValueChange} />;
}

// My column rendering
 {
      field: 'teacher_comment',
      headerName: 'Teacher Comment',
      width: 300,
      editable: true,
      renderEditCell: (params) => {
        return <CustomEditComponent props={params } />
        ;
      },
    },

方法3：默认单元格编辑

在此方法中，我使用 Material-UI DataGrid 支持的默认单元格编辑。但是，该值不会立即更新；它需要再次编辑单元格，然后停止以进行更新。这是此方法的片段：

// My update function
  const handleEditCellChange = (params) => {
    
    // const updatedRows = [...AssignmentData];
    // updatedRows[params.id][params.field] = params.value;
    // setAssignmentData(updatedRows);
    

    console.log(params);
    // Update the comment in the AssignmentData and make an API call to update the comment on the server.
    const updatedRows = [...AssignmentData];
    const rowIndex = updatedRows.findIndex((row) => row.id === params.id);
    updatedRows[rowIndex][params.field] = params.value;
}

// My render function 
{
      field: 'teacher_comment',
      headerName: 'Teacher Comment',
      width: 300,
      editable: true,
      
    },

// My datagrid
<DataGrid
          rows={AssignmentData}
          columns={columns}
          pageSize={15}
          rowHeight={50}
          checkboxSelection={false}
          pagination={true}
          autoPageSize={false}
          sortModel={sortModel}
          onSortModelChange={(newModel) => setSortModel(newModel)}
          onCellEditStop={(params) => handleEditCellChange(params)}
          disableNavigation={true}
          
          
        />

我将非常感谢任何指导或解决方案来解决这些问题并在 Material-UI DataGrid 中实现平滑的单元格编辑和值更新。预先感谢您的帮助！

Answer 1

我在第一种方法中找到了解决方案。

{
      field: "teacher_comment",
      headerName: "Teacher Comment",
      width: 300,
      editable: true,
      renderEditCell: (params) => {
        return (
          <TextField
            variant="outlined"
            size="small"
            value={params.value}
            fullWidth
            onChange={(e) => {
              // Update the value in the cell
              const updatedValue = e.target.value;
              params.api.setEditCellValue({
                id: params.id,
                field: params.field,
                value: updatedValue,
              });
              // Calling function to update the state and call api
              handleEditCellChange({ ...params, value: updatedValue });
            }}
          />
        );
      },
    },

我必须使用

params.api.setEditCellValue

才能正确更新值。

之前以任何方法都没有成功，因为我正在遵循文档并通过

apiRef

进行调用，这在我的情况下不起作用。

Answer 2

我希望我能有良好的声誉来给你的答案竖起大拇指。 不费力气就可以了。