解决 Ant Design 3x 模态确认中“否”和模态关闭（X）不同的值

Question

我正在使用 Ant Design 3X 模式确认来在我的 React 应用程序中显示确认模式。我需要根据用户与模式的交互来解析具有不同值的 Promise：

• 当用户单击“是”时，解析为 1。
• 当用户单击“否”时，解析为 0。
• 当用户使用“X”图标关闭模式时，解决为 2。

但是，我注意到，当我使用“X”图标关闭模式时，会调用 onCancel 函数并用 0 解析 Promise。这是我的代码：

Confirmation = async () => {
    return new Promise((resolve, reject)=>{
        confirm({
            title: `Message`,
            okText: 'Yes',
            cancelText: 'No',
            onOk: () => {
                resolve(1)
            },
            onCancel: () => {
                resolve(0)
            },
        });
    })
}

有没有办法区分使用“X”图标关闭模态和单击“否”，以便当使用“X”图标关闭模态时我可以用 2 解析 Promise？

Answer 1

通过对 onCancel 处理程序稍作修改，您可以实现当用户单击“否”或使用 Ant Design Modal 确认中的“X”图标关闭模式时解析不同值的所需行为。这是更新后的代码：

Confirmation = async () => {
    return new Promise((resolve, reject) => {
        confirm({
            title: `Message`,
            okText: 'Yes',
            cancelText: 'No',
            onOk: () => {
                resolve(1); // Resolve with 1 when the user clicks "Yes"
            },
            onCancel: (close) => {
                if (close?.triggerCancel) {
                    resolve(2); // Resolve with 2 when the modal is closed using the "X" icon
                } else {
                    resolve(0); // Resolve with 0 when the user clicks "No"
                    close(true); // Close the modal
                }
            },
        });
    });
};

在此代码中：

• 当用户单击“是”时，onOk 处理程序将 Promise 解析为 1。
• 当用户单击“否”时，onCancel 处理程序会检查 close?.triggerCancel 是否为 true，表示使用“X”图标关闭模式，然后将 Promise 解析为 2。如果为 false，则解析为 0 （当用户单击“否”时）并使用 close(true) 关闭模式。

此修改确保您可以区分使用“X”图标关闭模式和单击“否”并相应地解析 Promise。