如何在Antd DatePicker回调中传递主键并保存至数据库？

一、onOk/onChange仅打印选中值的基础示例 #

直接在回调中获取选中的value并打印即可，示例代码如下：

// onChange 回调示例
<DatePicker onChange={(value) => console.log('选中日期：', value)} />

// onOk 回调示例
<DatePicker onOk={(value) => console.log('确认日期：', value)} />

二、表格行主键传递到DatePicker回调的实现 #

结合你提供的可编辑表格代码，核心思路是通过闭包将当前行的完整数据（包含主键key）绑定到DatePicker的回调中，具体实现步骤如下：

1. 自定义包含DatePicker的可编辑单元格组件 #

编写一个自定义单元格组件，接收当前行的record、列的dataIndex以及保存方法handleSave，在DatePicker的回调中直接调用这些参数：

const EditableDateCell = ({ record, dataIndex, handleSave }) => {
  const [currentDate, setCurrentDate] = useState(record[dataIndex]);

  // 处理DatePicker的确认事件
  const handleConfirmDate = (value) => {
    // 构造更新后的行数据，包含主键key
    const updatedRow = {
      ...record,
      [dataIndex]: value
    };
    // 调用原有保存方法提交到数据库
    handleSave(updatedRow);
    // 更新本地状态同步显示
    setCurrentDate(value);
  };

  return (
    <DatePicker
      value={currentDate}
      onChange={(value) => setCurrentDate(value)}
      onOk={handleConfirmDate}
    />
  );
};

2. 修改列配置渲染自定义组件 #

在处理列配置时，针对日期类型的列，指定render属性渲染上述自定义组件，同时传递必要参数：

const columnsProcessed = columns.map((col) => {
  if (!col.editable) {
    return col;
  }
  // 针对日期列（假设dataIndex为pub_date）使用自定义组件
  if (col.dataIndex === 'pub_date') {
    return {
      ...col,
      render: (text, record) => (
        <EditableDateCell 
          record={record} 
          dataIndex={col.dataIndex} 
          handleSave={handleSave} 
        />
      )
    };
  }
  // 其他可编辑列保持原有配置
  return {
    ...col,
    onCell: (record) => ({
      record,
      editable: col.editable,
      dataIndex: col.dataIndex,
      title: col.title,
      handleSave,
    }),
  };
});

通过这种方式，当用户点击DatePicker的OK按钮时，handleConfirmDate能直接拿到当前行的主键record.key，进而调用handleSave完成数据库更新。

三、是否需要修改变量触发整行更新？ #

需要，你当前代码中的setData(newData)已经正确实现了这一逻辑——当修改后的数据通过setData更新state时，React会自动重新渲染对应行的组件，确保表格显示最新的日期值，无需额外修改。

四、Antd DatePicker是否适用于该场景？ #

完全适用。Antd DatePicker本身支持嵌入表格单元格，配合闭包传参、state更新的逻辑，完全能满足“每行独立选择日期并保存到数据库”的需求。如果需要更复杂的交互（比如日期范围选择、时间精确选择），其衍生组件（如RangePicker、DatePicker.TimePicker）也能完美适配。

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