antd Modal组件 如何监听右上角按钮 和 下面的取消按钮 两者时间做区分

Ant Design（antd）Modal组件并没有直接内置对右上角“确定”按钮和下方“取消”按钮的点击事件时间差检测功能。然而，你可以通过自定义这些按钮的行为来实现这个需求。例如：

1. **监听确认按钮**（通常位于右上角）:

   import { Modal, Button } from 'antd';

   const customOkBtn = React.forwardRef((props, ref) => {
     const handleClick = () => {
       // 记录时间戳或其他标识
       const timestamp = new Date().getTime();
       // 发送请求并附带时间戳
       sendRequest(timestamp);
     };

     return <Button type="primary" onClick={handleClick} ref={ref}>{props.children}</Button>;
   });

   const YourModal = ({ ...rest }) => (
     <Modal {...rest}>
       <div>
         {/* 内容 */}
         <customOkBtn>确定</customOkBtn>
       </div>
     </Modal>
   );

2. **监听取消按钮**（通常位于底部）:
同样的方式，可以创建一个自定义的`cancelBtn`：

   const customCancelBtn = React.forwardRef((props, ref) => {
     const handleClick = () => {
       // 取消时可能不需要记录时间，但这里假设你也记录了一个时间
       const cancelTimestamp = new Date().getTime();
       // 取消请求
       cancelRequest(cancelTimestamp);
     };

     return <Button onClick={handleClick} ref={ref}>{props.children}</Button>;
   });
   
   // 在YourModal中替换取消按钮
   ...
   <customCancelBtn>取消</customCancelBtn>

为了区分子操作的时间，你可以在发送请求和取消请求的方法中记录下当前的时间点。