在反应管理中显示确认对话框的最简单方法是什么？

Question

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

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

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

实际上有一个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"
        />
    </>);
}