React-admin的onSave方法未传递表单值

Question

我正在开发一个React应用程序，并且一直在使用react-admin框架。

我需要对来自表单的数据进行预处理，因为我需要为新员工及其地址使用单独的表格，但又不想将其分为两个屏幕。

我在react-admin的Using onSave To Alter the Form Submission Behavior文档中找到了Create/Edit View 部分，并将其应用于我的代码（下面的示例），希望它可以让我在进入dataProvider之前处理数据。不幸的是，我似乎无法从表单中获取数据并进入CreateEntity按钮模块的回调。

创建视图

const CreateActions = props => (
    <TopToolbar {...props}>
        <CreateEntityButton props={props} variant="contained" label={"Create"}/>
    </TopToolbar>
);

const EmployeeCreate = props => (
    <Create {...props} >
    <TabbedForm toolbar={<CreateActions record={props.record} redirect="show" />}>
        <FormTab label="Identity">
            <span >
                <PersonInput />
            </span>
        </FormTab>
        <FormTab label="Address">
            <span >
                <AddressInput />
            </span>
        </FormTab>
    </TabbedForm>
    </Create>
)

export default TequitiEmployeeCreate;

[当我逐步浏览浏览器中的逻辑时，handleSave方法（如下）中的回调函数同时传递undefined和values参数的redirect。我希望values对象包含TabbedForm的所有输入值，以便可以对其进行解析，然后传递给我的dataProvider模块。

CreateEntityButton逻辑：

    const CreateEntityButton = ({  ...props}) => {
    const [create] = useCreate(props.props.resource);
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath } = props;

    const handleSave = useCallback(
        (values, redirect) => { // <-------- undefined all the time
            console.log(values);
            console.log(redirect);
            create(
                {
                    payload: { data: { ...values } },
                },
                {
                    onSuccess: ({ data: newRecord }) => {
                        notify('ra.notification.created', 'info', {
                            smart_count: 1,
                        });
                        redirectTo(redirect, basePath, newRecord.id, newRecord);
                    },
                }
            );
        },
        [create, notify, redirectTo, basePath]
    );

    return <SaveButton
        label={props.label}
        variant={props.variant}
        handleSubmitWithRedirect={handleSave}
    />;
};

[我认为也许应该为PersonInput和AddressInput提供单独的模块，但是即使将所有这些组件合并为一个组件也无济于事。

任何帮助/想法都会有所帮助。

Answer 1

[结果是，我正在混合示例，并且在保存按钮中使用handleSubmiutWithRedirect而不是onSave操作。

const CreateEntityButton = ({  ...props}) => {
        const resource = props.props.resource;
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath } = props.props;
    const dataProvider = useDataProvider();

    const handleSave = useCallback(
        (values) => {
            const createPerson =  new PersonAddressCreate(dataProvider);
            createPerson.create(values, resource)
                .then((data)=>{
                    notify('ra.notification.created', 'info', { smart_count: 1 });
                    redirectTo("show", basePath, data.id, data)
                })
                .catch((error)=>{
                    notify(error, 'error', { smart_count: 1 });
                })

        },
        [notify, redirectTo, basePath]
    );


    return <SaveButton
        {...props.props}
        label={props.label}
        variant={props.variant}
        onSave={handleSave}
    />;
};