如何在不使用Resource组件的情况下将表单数据保存在AOR中？

Question

我目前正在处理一个项目并使用 admin-on-rest。 Resource 组件到目前为止非常有用，构建视图以列出、查看、创建和编辑项目非常容易。但是出现了一些情况，不需要 Resource 组件并将 API 端点映射到 AOR 中的某些 url。

在这个项目中有一个设置页面，例如更改网站语言。现在我还想在那里添加一个用于编辑客户数据的表格。 AOR 文档有示例，其中 SimpleForm 组件位于 Edit 组件内，但我不能那样做，因为使用它会引发错误。我还不知道这些错误的确切原因，但我想这与此有关，我没有使用 Resource 组件来映射 [=] 的正确 API 端点14=] 要使用的组件。

首先，我遇到了一个问题，即如何在不使用 Resource 组件的情况下将客户数据获取到 SimpleForm 组件。我通过添加对 componentDidMount 方法的 rest 调用并将响应设置为状态来解决该问题。使用状态，SimpleForm 组件可以显示正确的客户数据。 SimpleForm 默认提供一个保存按钮，但我还发现我可以使用工具栏道具覆盖它。

到目前为止我的代码：

componentDidMount() {
    restClient("GET_ONE", 'customers', {pagination: { page: 1, perPage: 5 }, sort: { field: 'name', order: 'ASC' }, id: 5})
        .then(response => {
            this.setState({customerData: response.data});
        }
    });
}

render() {
    const FormToolbar = props => <Toolbar>
        <SaveButton label="Save" />
    </Toolbar>;

    return (
        <Card>
            <ViewTitle title="Edit customer" />

            <SimpleForm record={this.state.customerData} toolbar={<FormToolbar />} >
                <TextInput source="name" />
                <TextInput source="email" />
                <TextInput source="street"  />
                <TextInput source="postal_code" />
                <TextInput source="city" />
            </SimpleForm>
        </Card>
    );
}

但是我应该如何实现保存客户详细信息呢？保存按钮目前什么都不做，可能是因为它不知道该做什么。我是否应该创建一些自定义函数并调用客户端点的 rest put？如何将该功能绑定到该保存按钮？

Answer 1

不要将 react-admin 组件用于资源之外的任何其他用途。这不是 UI 工具包。在你的情况下，你应该使用普通的旧 material-ui 并自己实现表单（验证、提交和提取等）

如何在不使用Resource组件的情况下将表单数据保存在AOR中？

How to save form data in AOR without using Resource component?

reactjs

admin-on-rest