React Antd自定义Modal弹窗按钮，轻松搞定！

2023-09-10 09:51:44

如何在 Ant Design Modal 组件中添加自定义按钮

导言

在当今快节奏的数字世界中，构建美观且用户友好的应用程序至关重要。Ant Design 作为 React UI 库的领导者，提供了全面的组件套件，可帮助您轻松打造出色的用户界面。其中一个关键组件是 Modal，它允许您创建模态对话框，用于显示重要信息、收集用户输入或执行其他操作。本文将深入探讨如何使用 Ant Design Modal 组件添加自定义按钮，从而为您的应用程序增添个性化和交互性。

导入 Ant Design

首先，您需要导入 Ant Design 库。您可以使用以下命令通过 npm 安装：

npm install antd

创建自定义按钮组件

接下来，您需要创建一个自定义按钮组件。这是用于创建按钮的 React 组件，具有您自己的样式和功能。您可以使用以下代码创建基本自定义按钮：

import React from "react";

const CustomButton = (props) => {
  return (
    <button type="button" className="custom-button" onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default CustomButton;

将自定义按钮添加到 Modal

现在，您需要将自定义按钮组件添加到 Ant Design Modal 组件中。可以通过在 Modal 的 footer 属性中传递一个包含自定义按钮的数组来实现：

import React from "react";
import { Modal, CustomButton } from "antd";

const App = () => {
  const handleOk = () => {
    console.log("OK");
  };

  const handleCancel = () => {
    console.log("Cancel");
  };

  return (
    <Modal
      title="Basic Modal"
      visible={true}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <CustomButton key="ok" onClick={handleOk}>
          OK
        </CustomButton>,
        <CustomButton key="cancel" onClick={handleCancel}>
          Cancel
        </CustomButton>,
      ]}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

export default App;

使用自定义按钮执行操作

最后，您可以使用自定义按钮执行操作，例如处理用户输入或触发特定事件。这可以通过为按钮的 onClick 事件处理程序传递一个函数来实现：

import React from "react";
import { Modal, CustomButton } from "antd";

const App = () => {
  const handleOk = () => {
    console.log("OK");
  };

  const handleCancel = () => {
    console.log("Cancel");
  };

  const handleCustomButton = () => {
    console.log("Custom Button");
  };

  return (
    <Modal
      title="Basic Modal"
      visible={true}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <CustomButton key="ok" onClick={handleOk}>
          OK
        </CustomButton>,
        <CustomButton key="cancel" onClick={handleCancel}>
          Cancel
        </CustomButton>,
        <CustomButton key="custom" onClick={handleCustomButton}>
          Custom Button
        </CustomButton>,
      ]}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

export default App;