转换 $.Deferred() 以做出反应

Question

我正在使用 DevExtreme React 组件包，但遇到了一个问题，即文档仅涵盖 jQuery，我不确定如何在 React 中完成这项工作。

这是他们文档中的示例 (https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxList/Configuration/#onItemDeleting):

    onItemDeleting: function(e) {
        const d = $.Deferred();
        DevExpress.ui.dialog.confirm("Do you really want to delete the item?")
            .done(function(value) { 
                d.resolve(!value);
            })
            .fail(d.reject);
        e.cancel = d.promise();
    }

这就是我尝试转换为 React 的方式。

我的删除函数：

async function deleteTemplate(e)
{
    console.log(e);
    let del = await confirm("Are you sure you want to delete this template?", "Delete");
    if(del === false) {
        e.cancel = true;
        return;
    }
    console.log("delete");
 }

然后我将它绑定到这个组件：

<List
    dataSource={templateList}
    displayExpr="templateName"
    height={400}
    allowItemDeleting={true}
    onItemDeleting={deleteTemplate}
>
</List>

问题是如果我不设置 e.cancel = true Immediately 那么它不会取消并且项目被删除。

例如这将取消：

async function deleteTemplate(e)
{
    e.cancel = true;
 }

但是如果我用对话的方式就不行了。正在执行的任何幕后删除功能都不会等待我的方法完成。

我已经尝试了多种方法来阻止执行但无法让它工作，它总是在可以设置取消之前立即删除。

我的目标是做到这一点，如果用户单击“删除”，则仅当他们 select 是时才会删除。这是文档中的示例为 jQuery 显示的内容，但它在 React 中不起作用。

我是不是遗漏了什么？

Answer 1

看起来 jQuery 示例设置了取消承诺。如果你也这样做会怎样？

function deleteTemplate(e) {
    e.cancel = confirm(...).then(del => !del)
}

在您的代码中，e.cancel 属性直到确认调用解决后才会设置，而在 jQuery 示例中 e.cancel 属性立即设置，然后稍后解决。我假设列表组件旨在等待传入的取消承诺来解决但不等待 onDeleteItem 处理程序本身。

转换 $.Deferred() 以做出反应

converting $.Deferred() to react

javascript

reactjs

typescript

devextreme