React Admin中SimpleForm内自定义组件如何启用保存按钮并传自定义数据

问题原因 #

React Admin 的SimpleForm默认基于react-hook-form管理表单状态，保存按钮的启用逻辑依赖表单的isDirty状态（即表单值是否被修改）。你目前的自定义组件未接入RA的表单状态管理，RA检测不到内容变更，所以保存按钮一直处于禁用状态，也无法自动收集自定义组件的提交数据。

操作步骤 #

1. 自定义组件接入RA表单（自动激活保存按钮） #

推荐使用RA提供的useInput钩子改造自定义组件，将组件的值注册到表单系统中，RA会自动检测值变更并激活保存按钮，同时自动收集字段值：

// 以TagInput改造为例
import { useInput } from 'react-admin';

const TagInput = ({ source, ...rest }) => {
  // source为该字段对应提交记录的属性名
  const { field } = useInput({ source });
  return (
    <OriginalTagInput
      value={field.value}
      onChange={(selectedTags) => field.onChange(selectedTags)}
      {...rest}
    />
  )
}

// EntityInput同理改造，指定对应source

如果你不想改造原有自定义组件，也可以用useFormContext手动更新表单状态：

import { useFormContext } from 'react-hook-form';

// 在Create页面组件内部调用
const { setValue, getValues } = useFormContext();

// 你的值变更回调里手动更新表单状态，触发isDirty变更
const onChangeLabel = (e) => {
  setValue('label', e.target.value, { shouldDirty: true });
}
const addEntity = (entity) => {
  // 先获取现有值再更新
  const currentEntities = getValues('entities') || [];
  setValue('entities', [...currentEntities, entity], { shouldDirty: true });
}

2. 修改提交的记录内容 #

使用SimpleForm的transform属性，可在提交请求发送前自定义最终要创建的记录内容，支持新增、修改、删除字段：

import { Create, SimpleForm, TextInput } from 'react-admin';

// 提交前转换数据，返回值就是最终传给dataProvider的记录
const transform = (formData) => {
  return {
    ...formData,
    // 可添加任意自定义字段
    createTime: Date.now(),
    creator: 'current_user',
    // 也可修改表单收集到的字段值
    label: formData.label.trim()
  }
}

const YourCreatePage = (props) => {
  return (
    <Create {...props}>
      <SimpleForm 
        {...props} 
        transform={transform}
        defaultValues={{
          entities: [],
          tags: []
        }}
      >
        <TextInput source="label" label="Audience label" placeholder="Audience label" />
        <br />
        <EntityInput source="entities" entityNames={entityNames} />
        <TagInput source="tags" />
        <br />
      </SimpleForm>
    </Create>
  )
}

完成以上配置后，只要表单内容有变更，保存按钮会自动启用，提交时会按照transform返回的内容创建记录。

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