Material React Table 1.8.5自定义复选框编辑无法更新行数据求助

你的问题出在自定义复选框组件只维护了本地状态，没有将新值同步到Material React Table的编辑状态容器中，导致保存时表格无法获取到更新后的值。以下是针对1.8.5版本的修复方案：

修改自定义复选框组件 #

替换原来的本地useState逻辑，直接使用MRT提供的编辑状态API来同步值：

import { Checkbox, FormControlLabel } from "@mui/material"
import React from "react"

const EditCheckbox = (props: any) => {
  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 调用row的setEditValue方法更新表格编辑状态
    props.row.setEditValue(props.column.id, e.target.checked)
  }

  // 优先取编辑状态的值，无则回退到原始单元格值
  const currentValue = props.cell.getEditValue() ?? props.cell.getValue()

  return (
    <FormControlLabel
      control={
        <Checkbox
          name={props.column.id}
          checked={currentValue}
          onChange={handleCheckboxChange}
        />
      }
      label={props.column.id}
    />
  )
}

export default EditCheckbox

为什么这样有效 #

在MRT 1.8.x版本中，模态编辑的状态由表格内部统一管理：

• cell.getEditValue()：获取当前列处于编辑状态的值，未修改时会返回原始单元格值
• row.setEditValue(columnId, newValue)：更新对应列的编辑状态值，这个值会在保存编辑时被表格捕获并提交

列配置保持不变 #

你的原有列配置无需修改，继续使用即可：

const columns = [
  {
    accessorKey: 'email',
    header: 'Email',
    Edit: (props) => <EditCheckbox {...props} />,
  },
];

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