材料反应表。使用自定义输入字段进行编辑时的行为

Question

使用自定义日期字段（@mui/x-date-pickers/DatePicker）进行编辑后，行为是该字段粘贴在屏幕上。所有自定义输入字段都会发生这种情况。如果我使用捷运“文本”| “选择”字段，当单击外部时，它会自动呈现文本值而不是字段。

如果我尝试编辑另一个字段（或单击任何行/列），那么只有它会呈现为文本/值。

添加以下配置。

const table = useMaterialReactTable({
    columns: data.length > 1 ? columnData : [],
    data,
    enableColumnActions: false,
    enableRowActions: editableIcons ? true : false,
    positionActionsColumn: 'last',
    initialState: { showColumnFilters: false, showGlobalFilter: true },
    enablePagination: false,
    enableGlobalFilter: isConfiguredOnTable(searchFilter, false),
    enableDensityToggle: false,
    enableFullScreenToggle: false,
    enableHiding: false,
    enableStickyHeader: true,
    enableRowSelection: isConfiguredOnTable(rowSelect, false),
    displayColumnDefOptions: {
      'mrt-row-actions': {
        header: 'Action Name',
        size: 150,
      },
    },
    renderTopToolbarCustomActions: toolBarBtns
      ? toolBarBtns
      : () => <h3 className={Styles.tableHeading}>{tableName} </h3>,
    renderEmptyRowsFallback: () => <Box className={Styles.emptyWrapper}>{translate('NO_RECORDS')}</Box>,
    renderRowActions: editableIcons ? editableIcons : false,
    enableEditing: enableEditing,
    editDisplayMode: 'cell',
    enableCellActions: true,
    getRowId: getRowId,
    muiTableBodyCellProps: ({ cell, column, table }) => ({
      onClick: () => {
        table.setEditingCell(cell); //set editing cell
      },
      onBlur: (event) => {
        console.log('@123', event);
      },
    }),
  });

编辑配置：

Edit: ({ column, row, table }: any) => {
        const onAccept = (event: any) => {
          const isoDate = dayjs.utc(event).toISOString();

          row._valuesCache[column.id] = isoDate;
          table.setEditingRow(null);
        };

        return <DatePickerField value={dayjs(row.original.hireDate)} name="hire-date" onAccept={onAccept} />;
      };

目标：

当我完成编辑并单击外部时，应隐藏自定义输入字段并应显示该字段的文本内容/值。

Ps：DatePicker没有onBlur，所以onAccept。我已经使用@mui/material/TextField 进行了测试。但得到了同样的行为。 顺便说一句，我希望 muiTableBodyCellProps 是我可以使用修改后的数据进行 api 调用的地方。如果我错了请纠正我。

提前致谢。

Answer 1

muiTableBodyCellProps: ({ cell, column, table, row }) => ({
      onClick: () => {
        table.setEditingCell(cell);
      },
      onBlur: async (event: React.FocusEvent) => {
        event.preventDefault();
        // api calls if any

        table.setEditingRow(null); // set back to null.
        table.setEditingCell(null);      
      },
}),

即使您将编辑模式设置为单元格，

[editDisplayMode="cell"]

table.setEditingRow也是由MRT设置的。因此，您还需要在 onBlur 函数中将其设置回 null。