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

Question

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

我需要预处理来自表单的数据，因为我需要为新员工及其地址提供单独的表格，但不想将其分成两个屏幕。

我在 react-admin 的 Create/Edit View 文档中找到了 Using onSave To Alter the Form Submission Behavior 部分，并将其应用于我的代码（下面的示例），希望它能让我在进入之前处理数据数据提供者。不幸的是，我似乎无法从表单中获取数据并进入 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 有单独的模块是造成这种情况的罪魁祸首，但即使将所有这些组件整合成一个，也无济于事。

任何 help/thoughts 都会有所帮助。

Answer 1

事实证明，我在混合示例并在 SaveButton 中使用 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}
    />;
};

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

React-admin's onSave method not passing form values

reactjs

react-admin