React Admin中Edit组件TopToolbar自定义保存按钮失效求助

你当前的自定义保存按钮无效，核心原因有两点：

1. 用useEditController获取的record是页面加载时的初始数据，并非用户修改后的表单最新值，调用save(record)只会保存初始内容。
2. 直接调用save方法跳过了react-admin表单的验证流程，不符合框架的提交逻辑。

根据你的需求（将保存按钮放在TopToolbar中），推荐以下两种实现方式：

方式一：通过表单Ref触发默认提交（推荐） #

这种方式复用SimpleForm自带的提交逻辑，包含验证、错误提示、成功跳转等完整流程，无需手动处理save方法：

1. 在CustomerEdit组件中给SimpleForm添加Ref：

import { useRef } from 'react';
// ...其他导入

function CustomerEdit() {
  const formRef = useRef();

  return (
    <Edit
      sx={{
        '& .RaEdit-card': {
          border: 'none',
          display: 'flex',
          justifyContent: 'center',
        },
      }}
      actions={<CustomerEditActions formRef={formRef} />}
    >
      <SimpleForm ref={formRef}>
        {/* 原有表单内容 */}
      </SimpleForm>
    </Edit>
  );
}

2. 修改CustomerEditActions，传递Ref给TopSave：

const CustomerEditActions = ({ formRef }) => (
  <TopToolbar>
    <ExportButton variant="text" />
    <TopSave formRef={formRef} />
    <IconButton aria-label="Sync data">
      <SyncIcon color="primary" />
    </IconButton>
  </TopToolbar>
);

3. 重构TopSave组件，调用表单的提交方法：

const TopSave = ({ formRef }) => {
  const handleSave = () => {
    // 触发表单默认提交流程
    formRef.current?.submit();
  };

  return <Button variant="outlined" onClick={handleSave}>Save</Button>;
};

方式二：手动获取表单数据并调用Save方法 #

如果需要自定义保存逻辑（比如额外处理数据），可以通过useFormContext获取最新表单值，但需要确保组件在SimpleForm的上下文范围内。如果必须放在TopToolbar，可以将TopSave嵌套到SimpleForm内部的自定义toolbar中：

1. 自定义SimpleForm的Toolbar：

import { Toolbar } from 'react-admin';

const CustomFormToolbar = () => (
  <Toolbar>
    <TopSave />
  </Toolbar>
);

2. 在SimpleForm中使用自定义Toolbar：

<SimpleForm toolbar={<CustomFormToolbar />}>
  {/* 原有表单内容 */}
</SimpleForm>

3. 重构TopSave组件：

import { useFormContext } from 'react-hook-form';
import { Button, useSaveContext, useNotify, useRedirect } from 'react-admin';

const TopSave = () => {
  const { getValues } = useFormContext();
  const { save } = useSaveContext();
  const notify = useNotify();
  const redirect = useRedirect();

  const handleSave = async () => {
    try {
      // 获取表单最新值
      const formData = getValues();
      // 调用保存方法
      await save(formData);
      notify('保存成功');
      redirect('/customers'); // 根据需求调整跳转路径
    } catch (error) {
      notify('保存失败', { type: 'error' });
    }
  };

  return <Button variant="outlined" onClick={handleSave}>Save</Button>;
};

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