复制 react-admin 保存按钮答案

【问题标题】：Replicate react-admin Save Button复制 react-admin 保存按钮
【发布时间】：2020-02-06 13:56:37
【问题描述】：

我正在使用react-admin 框架。我正在尝试复制SaveButton，因此我可以将此按钮放到我的自定义Actions 组件中，并在我的Web 应用程序的不同部分显示该按钮。我设法创建了我的自定义Actions，但是当点击按钮时，它什么也没做。这是按钮的文档：

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/button/SaveButton.tsx

到目前为止我的代码：

const EditActions = ({ basePath, data, redirect }) =>
(
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <SaveButton submitOnEnter={false} redirect={redirect} />
    </CardActions>
);

我这样称呼我的行为：

<EditView actions={<EditActions />} {...props} />

任何想法如何复制SaveButton 及其保存操作？

提前谢谢你。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

SaveButton 需要很多东西作为道具传递，比如handleSubmit/handleSubmitWithRedirect

EditView actions 属性中传递的组件似乎没有收到任何这些属性 https://github.com/marmelab/react-admin/blob/94b0828558ed783dab000ecbc03f8a3e0447111c/packages/ra-ui-materialui/src/detail/Edit.js#L119-L127

您是否尝试过通过EditActions 传递它们？



const EditActions = ({ basePath, data, redirect, ...props }) =>
(
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <SaveButton submitOnEnter={false} redirect={redirect} {...props} />
    </CardActions>
);

....

<EditView actions={<EditActions {...props} />} {...props} />

【讨论】：

我做到了，但没有运气。控制台返回Uncaught TypeError: handleSubmitWithRedirect is not a function

【解决方案2】：

SaveButton 需要是表单工具栏覆盖，而不是 EditView 的操作覆盖。表单工具栏将有一组与编辑视图不同的道具。您必须在样式方面有创意才能让这个工具栏出现在 EditView 的顶部。

来自文档：

const PostEditToolbar = props => (
    <Toolbar {...props} >
        <SaveButton />
    </Toolbar>
);

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm toolbar={<PostEditToolbar />}>
            // ...
        </SimpleForm>
    </Edit>
);

【讨论】：