Estoy trabajando con el paquete de componentes DevExtreme React, pero me encontré con un problema en el que la documentación solo cubre jQuery y no estoy seguro de cómo hacer que esto funcione en React.
este es el ejemplo en sus documentos ( 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(); }y así es como traté de convertir a React.
Mi función de eliminación:
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"); }Y lo ato a este componente:
<List dataSource={templateList} displayExpr="templateName" height={400} allowItemDeleting={true} onItemDeleting={deleteTemplate} > </List> El problema es que si no configuro e.cancel = true Inmediatamente, no se cancela y el elemento se elimina.
Por ejemplo, esto cancelará:
async function deleteTemplate(e) { e.cancel = true; }Pero si uso el método de diálogo, entonces no funciona. La ejecución de cualquier función de eliminación detrás de escena que esté ocurriendo no espera a que se complete mi método.
He intentado varias formas de bloquear la ejecución, pero no puedo hacer que funcione, siempre se elimina de inmediato antes de que se pueda configurar la cancelación.
Mi objetivo es hacer que si un usuario hace clic en Eliminar, solo se elimine si selecciona Sí. Esto es lo que muestra el ejemplo en documentos para jQuery pero no funciona en React.
¿Me estoy perdiendo de algo?
Parece que el ejemplo de jQuery establece una promesa de cancelación. ¿Qué pasa si haces eso también?
function deleteTemplate(e) { e.cancel = confirm(...).then(del => !del) } En su código, la propiedad e.cancel no se establece hasta que se resuelve la llamada de confirmación, donde, como en el ejemplo de jQuery, la propiedad e.cancel se establece inmediatamente y luego se resuelve más tarde. Supongo que el componente de la lista está diseñado para esperar a que se resuelva una promesa de cancelación aprobada, pero no espera al controlador onDeleteItem en sí.