0

在react-admin，我想创建一个切换按钮，它基于数据库的默认值将允许用户更改状态并Show在后端数据库中以及在后端数据库中进行相应的更改。

目前我的代码如下所示：

default class Deploy extends React.Component<{ data: any }> {
    handleClick = () => {
        const status = this.props.data.status;
        alert(status);
    };
    render() {
        const status = this.props.data.status;
        return (
            <Fragment>
                <Button color="primary" onClick={this.handleClick}>
                    <ActionEject />
                    {status === "DEPLOYED" ? "UNDEPLOY" : "DEPLOY"}
                </Button>
            </Fragment>
        );

    }
}

class Actions extends React.Component<{ basePath: any; data: any; resource: any }, any> {
    render() {
        const basePath = this.props.basePath;
        const data = this.props.data;
        const resource = this.props.resource;
        if (this.props.data) {
            const defaultValue = this.props.data.default;
            return (
                 <Deploy data={data} />
               );
        }
        return null;
      }

   }

export default class ModelShow extends React.Component {
    render() {
        return (
            <Show title={<ModelName />} actions={<Action />} {...this.props}>
                <TabbedShowLayout>
                    <Tab label="Summary">
                        <TextField source="id" />
                        <TextField source="status" />
                    </Tab>
                </TabbedShowLayout>
            </Show>
        );
    }
}

PS：我正在使用打字稿。

4

1 回答 1

1

您将在Actions的文档中找到多个示例

为了正确更新 react-admin 状态，您应该遵循使用数据提供程序而不是 Fetch示例或使用自定义操作创建者示例。

这是一个直接使用 dataProvider 的示例：

// Import the UPDATE verb
import { UPDATE } from 'react-admin';

// Import your dataProvider
import dataProvider from '../dataProvider';

default class Deploy extends React.Component<{ data: any }> {
    handleClick = () => {
        const status = this.props.data.status;

        const { push, record, showNotification } = this.props;
        const updatedRecord = { ...record, status };
        dataProvider(UPDATE, 'you_resource_name', { id: record.id, data: updatedRecord })
            .then(() => {
                // Optional notification
                showNotification('Resource deployed');

                // Optional redirection to the list page
                push('/you_resource_name');
            })
            .catch((e) => {
                console.error(e);
                showNotification('Error: resource not deployed', 'warning')
            });
    };
    render() {
        const status = this.props.data.status;
        return (
            <Fragment>
                <Button color="primary" onClick={this.handleClick}>
                    <ActionEject />
                    {status === "DEPLOYED" ? "UNDEPLOY" : "DEPLOY"}
                </Button>
            </Fragment>
        );

    }
}
于 2018-06-18T13:09:52.063 回答