antd实现一个带有输入框的确认删除对话框

再吃一根胡萝卜2025-03-06 11:26

在使用 Ant Design 的 Modal 组件时，可以通过以下方式实现一个带有输入框的确认删除对话框。用户必须输入特定内容（如"delete"）后才能执行删除操作：

示例代码

tsx 复制代码

import React, { useState } from "react";
import { Modal, Button, Input, message } from "antd";

const DeleteModal: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState<string>("");

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    if (inputValue.toLowerCase() === "delete") {
      message.success("删除成功！");
      setVisible(false);
      setInputValue(""); // 清空输入框
    } else {
      message.error("请输入正确的删除确认词！");
    }
  };

  const handleCancel = () => {
    setVisible(false);
    setInputValue(""); // 清空输入框
  };

  return (
    <div>
      <Button type="danger" onClick={showModal}>
        删除
      </Button>
      <Modal
        title="确认删除"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>请输入 "delete" 以确认删除：</p>
        <Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="请输入 delete"
        />
      </Modal>
    </div>
  );
};

export default DeleteModal;

代码说明

输入框验证 ：通过监听输入框的值（inputValue），在点击"确定"按钮时检查是否输入了正确的值（如"delete"）。
动态提示 ：如果用户输入错误，会通过 message.error 提示用户输入正确的删除确认词。
模态框控制 ：通过 visible 状态控制模态框的显示与隐藏。

将上述代码集成到你的项目中，即可实现用户必须输入"delete"才能确认删除的功能。