如何在material-react-table中使用自定义编辑组件并填充创建值？

我正在按照material-react-table官方文档创建CRUD表格，参考编辑CRUD示例实现新建功能，但使用自定义模态组件（而非库提供的internalEditComponents）时遇到问题：自定义对话框已正常显示，但handleCreate函数中的values参数为空，只有使用internalEditComponents时才有值。请问如何无需大量自定义逻辑即可填充handleCreate函数的values参数？

相关代码 #

创建处理函数 #

const handleCreate: MRT_TableOptions<any>['onCreatingRowSave'] = props => {
  const { values, table, row } = props;

  console.log('handleDomainCorrectionCreate', values); // 此处为空

};

自定义对话框 #

renderCreateRowDialogContent: props => {
    const { table, row, internalEditComponents } = props;
    return (
      <>
        <DialogTitle>Add correction entry</DialogTitle>
        <DialogContent>
          <Box sx={{ my: 2 }}>
            <DialogContentText variant="subtitle2">From</DialogContentText>
            <TextField
              autoFocus
              id="error_name"
              label="Error Name"
              type="text"
              fullWidth
              variant="standard"
              name="error_name"
              onChange={event => setErrorName(event.target.value)}
              value={errorName}
            />
          </Box>
          <Box sx={{ my: 2 }}>
            <DialogContentText variant="subtitle2">To</DialogContentText>
            <TextField
              id="corrected_name"
              label="Corrected Name"
              type="text"
              fullWidth
              variant="standard"
              name="corrected_name"
              onChange={event => setCorrectedName(event.target.value)}
              value={correctedName}
            />
          </Box>
        </DialogContent>
        <DialogActions>
          <MRT_EditActionButtons variant="text" table={table} row={row} />
        </DialogActions>
      </>
    );
}

问题核心是你自行维护了errorName和correctedName局部状态，未与material-react-table内置的编辑状态联动。onCreatingRowSave的values参数来自表格内部编辑状态，因此需要通过表格提供的方法管理字段值，而非自定义局部state。

方式一：用表格setValue方法联动状态 #

替换自定义的setErrorName/setCorrectedName，直接调用表格的setValue更新字段值，让表格自动收集这些值传递给handleCreate：

renderCreateRowDialogContent: props => {
  const { table, row } = props;
  // 从表格编辑状态中获取当前字段值
  const errorName = table.getState().editing?.values?.error_name ?? '';
  const correctedName = table.getState().editing?.values?.corrected_name ?? '';

  return (
    <>
      <DialogTitle>Add correction entry</DialogTitle>
      <DialogContent>
        <Box sx={{ my: 2 }}>
          <DialogContentText variant="subtitle2">From</DialogContentText>
          <TextField
            autoFocus
            id="error_name"
            label="Error Name"
            type="text"
            fullWidth
            variant="standard"
            name="error_name"
            onChange={event => table.setValue('error_name', event.target.value)}
            value={errorName}
          />
        </Box>
        <Box sx={{ my: 2 }}>
          <DialogContentText variant="subtitle2">To</DialogContentText>
          <TextField
            id="corrected_name"
            label="Corrected Name"
            type="text"
            fullWidth
            variant="standard"
            name="corrected_name"
            onChange={event => table.setValue('corrected_name', event.target.value)}
            value={correctedName}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <MRT_EditActionButtons variant="text" table={table} row={row} />
      </DialogActions>
    </>
  );
}

方式二：复用内置编辑组件（更简洁） #

若仅需自定义布局而非完全重写输入组件，直接复用internalEditComponents中的组件，自动与表格状态联动：

renderCreateRowDialogContent: props => {
  const { table, row, internalEditComponents } = props;
  // 获取内置输入组件
  const ErrorNameInput = internalEditComponents.error_name;
  const CorrectedNameInput = internalEditComponents.corrected_name;

  return (
    <>
      <DialogTitle>Add correction entry</DialogTitle>
      <DialogContent>
        <Box sx={{ my: 2 }}>
          <DialogContentText variant="subtitle2">From</DialogContentText>
          <ErrorNameInput />
        </Box>
        <Box sx={{ my: 2 }}>
          <DialogContentText variant="subtitle2">To</DialogContentText>
          <CorrectedNameInput />
        </Box>
      </DialogContent>
      <DialogActions>
        <MRT_EditActionButtons variant="text" table={table} row={row} />
      </DialogActions>
    </>
  );
}

修改后，handleCreate的values参数会自动包含对话框中输入的字段值，无需额外自定义收集逻辑。

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