在 react-admin 中显示确认对话框的最简单方法是什么？

Question

在一个 react-admin 项目中，我创建了自己的工具栏按钮，它应该显示一个确认对话框，类似于 JavaScript 警报，但不像 quite 那样丑陋。

只有当用户点击确定时，事情才会发生，在我的例子中是一些数据库操作。

react-admin 中是否有 ootb 警报对话框，或者创建一个简单的方法是什么？我在文档中找不到关于该主题的任何内容。我尝试了 material ui 中的警报示例（参见 https://v1.material-ui.com/demos/dialogs/），但由于我对 React 的理解非常有限，我无法从示例中创建可重用组件。

更新：
下面的代码片段说明了我想做什么：

// Definition of a toolbar button
const ActionButton = ({ handleSubmitWithRedirect, ...props }) => {
    const form = useForm();
    var formdata = form.getState().values;

    switch (formdata.status.id) {
        case 0:
            props.label = "Text for state 0";
            break;
        case 1:
            props.label = "Text for state 2";
            break;
        default:
            props.label = "Unknown state"
    }

    const handleClick = useCallback(() => {
        switch (formdata.status.id) {
            case 0:
                form.change('status', status[1]);
                break;
            case 1:
                // Here I want to open a confirmation Dialog...
                if( openAlertDialog("Warning, things will happen","Okay","Better not")) 
                {
                    form.change('status', status[2]);
                    createDatabaseRecord(formdata).then(() => (
                        // success handling [...]
                    ),
                    () => (
                        // error handling [...]
                    ))
                };
                break;
            default:
        }
        handleSubmitWithRedirect('list');
    }, [formdata, form]);
    return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};

Answer 1

查看以下代码和框，了解如何使用 Material-UI 触发打开对话框以及根据您是否单击 "Agree" 或"Disagree" 个按钮。

https://codesandbox.io/s/material-demo-cspqy

Answer 2

实际上有一个 Confirm 组件可以像这样用在工具栏按钮中：

const ExampleButton = ({ handleSubmitWithRedirect, handleSubmit, ...props }) => {
    const form = useForm();
    const notify = useNotify();
    const [open, setOpen] = React.useState(false);
    const handleClick = () => setOpen(true);
    const handleDialogClose = () => setOpen(false);

    const handleConfirm = () => {
        doStuff();
        notify('Stuff is done.');
        handleSubmit();
        setOpen(false);
    };

    var ct = "Do you really want to do stuff?";
    return (<><SaveButton {...props} handleSubmitWithRedirect={handleClick} handleSubmit={handleClick} variant="outlined" />
        <Confirm
            isOpen={open}
            title="do stuff"
            content={ct}
            onConfirm={handleConfirm}
            onClose={handleDialogClose}
            confirm="Yep"
            cancel="Nope"
        />
    </>);
}

Answer 3

如果有人感兴趣，这是我制作的 OK/Cancel 对话框。关闭组件内的对话框太难了。我必须在组件外部拥有该逻辑，但我找不到任何其他方法来实现关闭逻辑。

//Test.tsx
function Test() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
        <>
            <Button onClick={handleOpen}> Delete Category</Button>
            {open && <OKCancelDialog open={true} title={"Delete Thing!"}
                                     content={"Are you sure you want to delete thing?"}
                                     handleOK={() => {
                                         handleClose();
                                         alert("yeah")
                                     }}
                                     handleCancel={() => {
                                         handleClose();
                                         alert("cancel")
                                     }}/>}
        </>
    )
}

//OKCancelComponent.tsx
type Props = {
    title: string,
    content: string,
    handleOK: () => any,
    open: boolean
    handleCancel: () => any
}

export default function OKCancelDialog(props: Props) {
    return (
        <Dialog
            open={props.open}
            onClose={props.handleCancel}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <DialogTitle id="alert-dialog-title">
                {props.title}
            </DialogTitle>
            <DialogContent>
                <DialogContentText id="alert-dialog-description">
                    {props.content}
                </DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button onClick={props.handleOK}>
                    OK
                </Button>
                <Button startIcon={<CancelIcon/>} onClick={props.handleCancel}>Cancel</Button>
            </DialogActions>
        </Dialog>
    );
}

在 react-admin 中显示确认对话框的最简单方法是什么？

What is the easiest way to show a confirmation dialog in react-admin?

javascript

reactjs

material-ui

react-admin