admin-on-rest中CreateButton不传递记录ID及添加子记录方案咨询

我之前也碰到过一模一样的问题——admin-on-rest原生的CreateButton确实不会自动把父记录的ID传递给子记录的创建表单，默认的ReferenceManyField也只支持编辑已有子项。不过有几个可行的方案能解决这个问题，给你详细说说：

方案一：自定义带父ID的Create按钮（最常用） #

这个思路是自己封装一个Create按钮，跳转时把父订单的ID作为URL参数带过去，然后在子记录的创建页面自动填充这个关联字段。

1. 写个自定义的CreateWithParentButton #

import React from 'react';
import { CreateButton, push } from 'admin-on-rest';
import { connect } from 'react-redux';

const CreateWithParentButton = ({ record, push, ...props }) => {
    const handleClick = () => {
        // 跳转到子记录创建页，把父订单ID作为查询参数带上
        push(`/orderitems/create?orderId=${record.id}`);
    };

    return <CreateButton onClick={handleClick} {...props} />;
};

export default connect(null, { push })(CreateWithParentButton);

2. 在子记录的Create组件里读取参数并自动填充 #

在OrderItemCreate组件中，从URL里提取orderId，用HiddenInput把它自动填到表单里，用户看不到但提交时会带上：

import React from 'react';
import { Create, SimpleForm, TextInput, NumberInput, HiddenInput } from 'admin-on-rest';
import { withRouter } from 'react-router-dom';

const OrderItemCreate = ({ location, ...props }) => {
    // 从URL查询参数里拿orderId
    const orderId = new URLSearchParams(location.search).get('orderId');

    return (
        <Create {...props}>
            <SimpleForm>
                <HiddenInput source="orderId" defaultValue={orderId} />
                <TextInput source="productName" label="产品名称" />
                <NumberInput source="quantity" label="数量" />
                <NumberInput source="price" label="单价" />
            </SimpleForm>
        </Create>
    );
};

export default withRouter(OrderItemCreate);

3. 在父订单页面替换默认按钮 #

把订单的Show/Edit页面里的默认CreateButton换成你刚写的自定义按钮，放在ReferenceManyField的工具栏或者页面顶部的操作栏里：

import { Show, SimpleShowLayout, ReferenceManyField, Datagrid, TextField, NumberField, TopToolbar } from 'admin-on-rest';
import CreateWithParentButton from './CreateWithParentButton';

// 自定义订单详情页的操作栏
const OrderShowActions = ({ data, ...props }) => (
    <TopToolbar>
        <CreateWithParentButton record={data} label="添加订单子项" />
    </TopToolbar>
);

export const OrderShow = (props) => (
    <Show actions={<OrderShowActions />} {...props}>
        <SimpleShowLayout>
            <TextField source="id" label="订单ID" />
            <TextField source="customerName" label="客户名称" />
            
            <ReferenceManyField 
                label="订单子项" 
                reference="orderitems" 
                target="orderId"
            >
                <Datagrid>
                    <TextField source="productName" />
                    <NumberField source="quantity" />
                    <NumberField source="price" />
                    {/* 保留默认的编辑按钮即可 */}
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
    </Show>
);

方案二：inline添加子项（无需跳转页面） #

如果不想跳转到新页面，想在父订单的编辑页直接添加子项，可以自己实现一个简单的嵌套表单，手动调用dataProvider提交子记录，然后刷新列表：

import React, { useState } from 'react';
import { Edit, SimpleForm, TextField, NumberField, ReferenceManyField, Datagrid, SaveButton, Toolbar } from 'admin-on-rest';
import { dataProvider } from '../your-data-provider-path'; // 引入你的dataProvider

const OrderEdit = ({ id, ...props }) => {
    const [newItem, setNewItem] = useState({ productName: '', quantity: 1, price: 0 });
    const [refreshKey, setRefreshKey] = useState(0); // 用这个key强制刷新子列表

    const handleAddItem = async () => {
        try {
            // 调用dataProvider创建子记录，关联父订单ID
            await dataProvider.create('orderitems', {
                data: { ...newItem, orderId: id }
            });
            // 重置表单
            setNewItem({ productName: '', quantity: 1, price: 0 });
            // 刷新子列表
            setRefreshKey(prev => prev + 1);
        } catch (err) {
            console.error('添加子项失败:', err);
            // 这里可以加个错误提示给用户
        }
    };

    return (
        <Edit {...props}>
            <SimpleForm toolbar={<Toolbar><SaveButton /></Toolbar>}>
                <TextField source="id" label="订单ID" />
                <TextField source="customerName" label="客户名称" />

                {/* 内嵌的子项添加表单 */}
                <div style={{ margin: '2rem 0', padding: '1rem', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
                    <h4>添加新子项</h4>
                    <TextInput 
                        label="产品名称"
                        value={newItem.productName}
                        onChange={(e) => setNewItem({...newItem, productName: e.target.value})}
                        fullWidth
                    />
                    <NumberInput 
                        label="数量"
                        value={newItem.quantity}
                        onChange={(e) => setNewItem({...newItem, quantity: parseInt(e.target.value) || 1})}
                        style={{ margin: '0 1rem' }}
                    />
                    <NumberInput 
                        label="单价"
                        value={newItem.price}
                        onChange={(e) => setNewItem({...newItem, price: parseFloat(e.target.value) || 0})}
                    />
                    <button onClick={handleAddItem} style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}>
                        添加子项
                    </button>
                </div>

                {/* 子项列表，靠refreshKey变化强制重新加载数据 */}
                <ReferenceManyField 
                    label="订单子项" 
                    reference="orderitems" 
                    target="orderId"
                    key={refreshKey}
                >
                    <Datagrid>
                        <TextField source="productName" />
                        <NumberField source="quantity" />
                        <NumberField source="price" />
                    </Datagrid>
                </ReferenceManyField>
            </SimpleForm>
        </Edit>
    );
};

方案三：升级到React-Admin（长期最优解） #

如果你的项目还能升级，强烈建议换到React-Admin——它是admin-on-rest的官方后续版本，原生支持了ReferenceArrayInput和带父关联的子记录创建，不需要自己写这么多自定义代码。比如用ReferenceArrayInput配合SimpleFormIterator就能直接在父表单里添加、编辑、删除子记录，非常省心。

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