Какой самый простой способ показать диалоговое окно подтверждения в реакции-администратора? - PullRequest
0 голосов
/ 20 февраля 2020

В проекте реакции-администратора я создал собственную кнопку на панели инструментов, которая должна отображать диалоговое окно подтверждения, похожее на предупреждение JavaScript, но не такое уродливое.

Только когда пользователь нажимает кнопку ОК, что-то должно произойти, в моем случае некоторые операции с базой данных.

Есть ли в реакции-admin диалог оповещения ootb или какой простой способ создать его? Я не мог найти ничего в документах об этом топи c. Я попробовал пример предупреждения из пользовательского интерфейса материала (см. https://v1.material-ui.com/demos/dialogs/), но из-за моего очень ограниченного понимания реакции я не могу создать компонент многократного использования из примера.

Обновление: Фрагмент кода ниже иллюстрирует то, что я хотел бы сделать:

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

1 Ответ

0 голосов
/ 20 февраля 2020

Ознакомьтесь со следующими кодами и ящиком для примера того, как запустить диалоговое окно с помощью Material-UI, а также инициировать различные действия в зависимости от того, нажимаете ли вы кнопки «Согласен» или «Не согласен».

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...