基于Ant Design为点击触发的Card组件添加带文本及确认/取消按钮的弹窗

Got it, let's integrate the Ant Design confirmation modal into your existing card component so the user gets a prompt before executing the original business logic. Here's a straightforward implementation:

Step 1: Import Ant Design Modal #

First, make sure you've imported the Modal component from Ant Design at the top of your file:

import { Modal } from 'antd';

Step 2: Modify the Card's Click Handler #

Instead of running your business logic directly when the card is clicked, we'll trigger the confirmation modal first. Here's how your updated card component might look:

<div 
  className="card"
  onClick={() => {
    // Trigger the Ant Design confirmation modal
    Modal.confirm({
      title: 'Confirm Action', // Replace with your custom title
      content: 'Are you sure you want to proceed with this action? Your custom text can go here.', // Add your personalized message
      okText: 'OK',
      cancelText: 'Cancel',
      // Execute original logic only when user confirms
      onOk() {
        setSelected('has production resumed');
        props.setView('downTime');
        props.startTimer();
        // Add your page navigation logic here if needed
      },
      // Optional: Add logic for when user cancels (modal closes by default)
      onCancel() {
        console.log('User chose to cancel the action');
        // You can add extra cleanup or feedback here if required
      }
    });
  }}
>
  {/* Your existing card content stays here */}
  [Card Content]
</div>

Quick Tips for Customization: #

• Tweak title, content, okText, and cancelText to match your app's tone and requirements.
• If your original logic includes async operations (like API calls), make the onOk function async and use await where necessary.
• You can adjust modal styles or behavior with additional Ant Design Modal props (like width, icon, or maskClosable) if needed.

Now when users click the card, they'll see the confirmation prompt first—your original business logic will only run once they click "OK".

内容的提问来源于stack exchange，提问作者Anisha Choudhury