react.js - React中Antd，Modal.confirm的按钮点击事件如何传递结果?

Question

react使用antd的Modal.confirm时，怎么在外面获取点击哪个按钮。

import { Modal} from 'antd';const cmdCan_Click = async () => {    await requestMsg(1);};//iAppMod=0或者iAppMod=1const requestMsg = async (msgTyp: number) => {    switch (iAppMod) {      // 0      case baseConst.Add:        switch (msgTyp) {          case 0:            await msgDialog('是否确实要注册？');            break;        }        break;      // 1      case baseConst.Upd:        switch (msgTyp) {          case 0:            await msgDialog('可以更改吗');            break;          case 1:            await msgDialog('没有修改完成，确定要结束吗？');            break;        }        break;};const msgDialog  = async (msg: string) => {    await Modal.confirm({      title: "test",      content: msg,      closable: true,      okText: "OK",      cancelText: "取消",      centered: true,      onOk() {              },      onCancel() {              },    })  };

在cmdCan_Click调用requestMsg()方法后，可以获取到msgDialog()对话框里面点击Ok还是Can按钮的值吗？在msgDialog里面renturn好像不行，requestMsg()方法不能得到返回值

Answer 1

以下是在 React 中使用 Antd 的 Modal.confirm 并传递按钮点击结果的示例代码：

import React, { useState } from'react';import { Modal, Button } from 'antd';function MyComponent() {  const [isModalVisible, setIsModalVisible] = useState(false);  const [result, setResult] = useState('');  const showModal = () => {    setIsModalVisible(true);  };  const handleOk = () => {    setResult('确定按钮被点击');    setIsModalVisible(false);  };  const handleCancel = () => {    setResult('取消按钮被点击');    setIsModalVisible(false);  };  return (    <div>      <Button type="primary" onClick={showModal}>        打开模态框      </Button>      <Modal        title="确认框"        visible={isModalVisible}        onOk={handleOk}        onCancel={handleCancel}      >        <p>这是一个确认框</p>      </Modal>      <p>点击结果: {result}</p>    </div>  );}export default MyComponent;

在上述代码中，通过 handleOk 和 handleCancel 函数来处理确定和取消按钮的点击事件，并更新 result 状态来展示点击结果。

Answer 2

利用 promise 封装一下就行了

const cmdCan_Click = async () => {    const instance = await requestMsg(1);    //  可拿到弹框实例更新弹框     instance?.modal.update({      title : ''    })    //  也可以拿到点击状态    instance?.status //  'OK' | 'Cancel'    //  逻辑完成 也可销毁弹框    instance?.modal.destroy();};//iAppMod=0或者iAppMod=1const requestMsg = async (msgTyp: number) => {    switch (iAppMod) {      // 0      case baseConst.Add:        switch (msgTyp) {          case 0:            return msgDialog('是否确实要注册？');        }        break;      // 1      case baseConst.Upd:        switch (msgTyp) {          case 0:            return msgDialog('可以更改吗')          case 1:            return msgDialog('没有修改完成，确定要结束吗？');        }        break;};const msgDialog  = async (msg: string) : Promise<{modal : ReturnType<typeof Modal.confirm> , status : 'OK' | 'Cancel'}> => {    return new Promise((resolve,reject)=>{      const modal =  Modal.confirm({        title: "test",        content: msg,        closable: true,        okText: "OK",        cancelText: "取消",        centered: true,        onOk() {          resolve({modal , status : 'OK'});        },        onCancel() {          resolve({modal , status : 'Cancel'});        },      })    })  };

Answer 3

在 Ant Design 的 Modal.confirm 方法中，你不能直接通过返回值来判断用户点击了哪个按钮，因为 Modal.confirm 是一个基于 Promise 的异步函数，但它并不返回用户点击的按钮信息。然而，你可以通过回调函数来处理用户的点击事件。

要获取用户点击的是“确定”还是“取消”按钮，你需要在 onOk 和 onCancel 回调函数中设置状态或者执行特定的逻辑。

以下是一个修改后的例子，它展示了如何在 onOk 和 onCancel 回调函数中处理用户的点击事件：

import { Modal, message } from 'antd';// 假设 baseConst 是你定义的常量const baseConst = {  Add: 0,  Upd: 1,};// 假设这是你的状态管理变量，用于存储用户的选择let userChoice = null;const cmdCan_Click = async () => {  await requestMsg(1);  // 在这里你可以根据 userChoice 来判断用户的选择  if (userChoice === 'ok') {    console.log('用户点击了确定');  } else if (userChoice === 'cancel') {    console.log('用户点击了取消');  }};const requestMsg = async (msgTyp: number) => {  // ... 省略其他代码  if (msgTyp === 0) {    msgDialog('是否确实要注册？');  }  // ... 省略其他代码};const msgDialog = (msg: string) => {  Modal.confirm({    title: "test",    content: msg,    closable: true,    okText: "OK",    cancelText: "取消",    centered: true,    onOk() {      userChoice = 'ok'; // 用户点击了确定      // 这里可以执行你需要的逻辑      message.success('用户点击了确定');    },    onCancel() {      userChoice = 'cancel'; // 用户点击了取消      // 这里可以执行你需要的逻辑      message.info('用户点击了取消');    },  });};// 调用 cmdCan_Click 函数来触发对话框cmdCan_Click();

在这个例子中，我使用了一个全局变量 userChoice 来存储用户的选择。然而，在实际应用中，你可能会使用 React 的状态（state）或者 Redux、MobX 等状态管理库来管理这些值。

注意，由于 Modal.confirm 是异步的，并且不返回 Promise，你不能在 requestMsg 函数中 await 它。相反，你应该在 onOk 和 onCancel 回调函数中处理用户的点击事件。