React Admin重定向至创建表单时如何标记表单为脏状态？

你遇到的核心问题是：React Admin的表单默认会对比初始空值和当前预填值，由于预填记录是直接作为初始值传入，表单认为未发生任何修改，因此保存按钮保持禁用状态。无需修改所有表单，以下几种方案可以快速解决：

方法1：手动标记表单为脏状态 #

在项目通用的创建表单组件中，通过useFormContext获取表单实例，结合路由状态判断是否存在预填记录，挂载时手动标记表单为脏。只需在通用表单中添加一次逻辑，所有复用该表单的创建页都会生效。

import { useFormContext, useLocation } from 'react-admin';
import { useEffect } from 'react';

const BaseCreateForm = ({ children }) => {
  const { form } = useFormContext();
  const location = useLocation();

  useEffect(() => {
    const { record } = location.state || {};
    if (record) {
      // 标记所有字段为脏，触发保存按钮状态更新
      form.setDirty(true);
    }
  }, [form, location.state]);

  return <>{children}</>;
};

方法2：传递记录时制造微小差异 #

在跳转到创建页的redirect逻辑中，对复制的记录做一个不影响业务的微小修改，让表单检测到值变化，自动切换为脏状态。比如添加一个临时字段（表单不会渲染该字段），或者删除原记录的id并追加标记：

// 复制记录时，添加临时标记字段
const duplicatedRecord = { ...data, id: undefined, _duplicated: true };
redirect('create', resource, undefined, {}, { record: duplicatedRecord });

表单会自动忽略未声明的字段，同时因为初始空值和预填值存在差异，保存按钮会自动启用。

方法3：自定义通用Create组件的保存逻辑 #

如果项目已有封装的通用Create组件，可以直接修改工具栏的保存按钮逻辑，判断路由状态中是否存在预填记录，强制启用保存按钮：

import { Create as RaCreate, SaveButton, Toolbar } from 'react-admin';
import { useLocation } from 'react-router-dom';

const CustomDuplicateToolbar = () => {
  const location = useLocation();
  const hasPreFilledData = !!(location.state?.record);

  return (
    <Toolbar>
      <SaveButton disabled={!hasPreFilledData && /* 保留原表单的禁用逻辑 */} />
    </Toolbar>
  );
};

const Create = (props) => {
  return <RaCreate {...props} toolbar={<CustomDuplicateToolbar />} />;
};

之后所有使用该自定义Create组件的页面，都能自动处理复制场景的保存按钮状态。

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