在React-Admin的SimpleFormIterator中添加隐藏ID字段的方法

方案1：使用HiddenInput存储子记录ID #

react-admin内置了HiddenInput组件，专门处理无需用户可见但需提交的字段，比给TextInput加hidden属性更可靠，不会渲染可见输入元素：

import { SimpleFormIterator, HiddenInput, TextInput } from 'react-admin';

// 在表单中配置
<SimpleFormIterator>
  <HiddenInput source="id" /> {/* 绑定子记录的ID字段 */}
  <TextInput source="name" label="子记录名称" />
  {/* 其他子记录字段 */}
</SimpleFormIterator>

该组件会自动将ID值纳入表单提交数据，且不会在页面显示任何元素。

方案2：自定义隐藏输入组件（适配特殊场景） #

若因版本或其他原因无法使用HiddenInput，可自行实现基于type="hidden"的输入组件：

import { useInput } from 'react-admin';

const CustomHiddenInput = ({ source }) => {
  const { input } = useInput({ source });
  return <input type="hidden" {...input} />;
};

// 使用示例
<SimpleFormIterator>
  <CustomHiddenInput source="id" />
  {/* 其他子记录字段 */}
</SimpleFormIterator>

这种方式同样能确保ID被提交，且无页面显示元素。

关于SimpleFormIterator的key属性 #

无需通过key直接获取子记录ID，只要确保子项表单字段正确绑定source="id"，SimpleFormIterator会自动迭代数组元素，将对应ID值关联到输入组件。如果你的子记录数组结构类似[{id: 1, name: 'xxx'}, {id: 2, name: 'yyy'}]，用上述隐藏输入组件绑定source="id"后，提交时ID会被包含在每个子对象中。

验证提交数据 #

可在表单onSubmit回调中打印提交数据，确认ID是否正确包含：

const handleSubmit = (values) => {
  console.log('提交的数据:', values);
  // 检查子记录数组中的ID是否存在
  // 后续保存逻辑
};

<SimpleForm onSubmit={handleSubmit}>
  {/* 父字段及SimpleFormIterator配置 */}
</SimpleForm>

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