Question

我试图显示一个确认模式（使用react-confirm）来警告用户当他试图移动到另一个部分时，表单中填写的信息将会丢失。

js的确认会阻止代码，所以我可以这样做：

shouldComponentUpdate(nextProps, nextState) {
        if (confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?')) {
            return true;
        } else {
            return false;
        }
}

但当我用其中一个库替换confirm方法时，我不能等待这个异步操作的结果。

async shouldComponentUpdate(nextProps, nextState) {
    const response = await confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?', { title: "Cambios sin guardar", okLabbel: "Sí", cancelLabel: "No!" })
        .then(
            () => {
                return true;
            },
            () => {
                return false;
            }
        );
    return (response);

}

有谁知道我怎么能得到这个？

Answer 1

您应该使用另一种方式解决此问题。单击任何按钮或其他一些操作后显示任何模态/确认窗口。然后为此窗口添加eventHandler，如：

_onClose(shouldUpdate) {
  if(shouldUpdate) {
    this.setState({}); // or this.forceUpdate()
  }
}

Answer 2

我最终改变了应用程序的结构。我用不同的路线管理每个部分。所以我在路由中而不是在组件中实现确认。

React：shouldComponentUpdate等待异步操作

2 个答案: