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

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} />;
};

- elsni

---

如果您正在寻找类似Bootstrap的模态框，请尝试使用此链接：https://react-bootstrap.github.io/components/alerts/。 - Saleh Almohtaseb

Answer 1

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

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"
        />
    </>);
}

- elsni

Answer 2

请查看以下Codesandbox示例，了解如何使用Material-UI触发打开对话框，并根据单击“同意”或“不同意”按钮触发不同的操作。

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

- Kendra Loves Code

---

谢谢，看起来很棒！我添加了一段代码片段来说明我想要做的事情。不幸的是，我无法重写您的示例以适应我的需求。 - elsni

仍然没有解决方案，我使用JavaScript的window.confirm()但它很丑... - elsni

Answer 3

在我的情况下，我创建了一个名为“ButtonConfirm”的新组件。

import React from 'react';

class ButtonConfirm extends React.Component
 {
    constructor(props)
    {
        super(props)

        this.state = {
            title: this.props.title,
            classButtonName: 'buttonForm buttonAlert',
            classDialogName: 'dialog_alert',
            query: this.props.query,
            param: "del",
            param_id: "-1",
            view: "button"
        }
        
    }

    showDialog()
    {
        this.setState({
            view: "query"
        });
        
    }

    onClickYes()
    {
        this.setState({
            view: "button"
        }); 

        this.props.onConfirm("yes",this.state.param, this.state.param_id);
    }

    onClickNo()
    {
        this.setState({
            view: "button"
        });

        this.props.onConfirm("no",this.state.param, this.state.param_id);
    }

    render()
    {
        if(this.state.view == "button")
        {
            return (
                <div className={this.state.classButtonName} onClick={this.showDialog.bind(this) }>{this.state.title}</div>
            );
        }

        if(this.state.view == "query")
        {
            return (
                <div className={this.state.classDialogName}>
                    <div>{this.state.title}</div>
                    <div className='container'>
                        <div>{this.state.query}</div>
                        <div className={this.state.classButtonName} onClick={this.onClickYes.bind(this) } >YES</div>
                        <div className={this.state.classButtonName} onClick={this.onClickNo.bind(this) } >NO</div>
                    </div>
                </div>
            );
        }
    }
 }

 export default ButtonConfirm;    

然后在我的“top”组件中，我创建了新的方法。

 onConfirmDel(type, param, id)
        {
           console.log(type + param + id);
        }

而在渲染方法中:

<ButtonConfirm  onConfirm={this.onConfirmDel.bind(this) }  title="Delete" query="Are you sure...?"  />

如果你想使用它，你需要 CSS 样式 :)

- Blazej Kita

Answer 4

如果有人感兴趣的话，这是我制作的“确定/取消对话框”。关闭组件内的对话框太困难了。我不得不将逻辑放在组件外部，但我找不到其他实现关闭逻辑的方法。

//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>
    );
}

- Oliver Watkins