antd实现一个带有输入框的确认删除对话框在使用 Ant Design 的 Modal 组件时，可以通过以下方式实现一个

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

示例代码

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”才能确认删除的功能。

好的，我将在代码中添加一个可选的回调函数参数，用于在用户成功确认操作后执行自定义逻辑。以下是更新后的代码：

更新后的代码

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

interface DeleteModalProps {
  requiredString: string; // 用户需要输入的字符串
  promptText?: string; // 提示文本（可选，默认值）
  defaultValue?: string; // 输入框的默认值（可选）
  onConfirm?: () => void; // 确认操作后的回调函数（可选）
}

const DeleteModal: React.FC<DeleteModalProps> = ({
  requiredString,
  promptText = "请输入以下内容以确认操作：",
  defaultValue = "",
  onConfirm, // 确认操作后的回调函数
}) => {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState<string>(defaultValue);

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

  const handleOk = () => {
    if (inputValue.toLowerCase() === requiredString.toLowerCase()) {
      message.success("操作成功！");
      setVisible(false);
      setInputValue(""); // 清空输入框

      // 如果有回调函数，则执行
      if (onConfirm) {
        onConfirm();
      }
    } else {
      message.error(`请输入正确的确认词：${requiredString}`);
    }
  };

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

  return (
    <div>
      <Button type="danger" onClick={showModal}>
        删除
      </Button>
      <Modal
        title="确认操作"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>{promptText}</p>
        <Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder={requiredString}
        />
      </Modal>
    </div>
  );
};

export default DeleteModal;

使用示例

在使用时，你可以传入一个 onConfirm 回调函数，当用户输入正确的确认词后，该回调函数会被触发：

import React from "react";
import ReactDOM from "react-dom";
import DeleteModal from "./DeleteModal";

const App = () => {
  const handleConfirm = () => {
    console.log("删除成功，执行后续逻辑...");
    // 在这里可以添加删除操作或其他逻辑
  };

  return (
    <div>
      <DeleteModal
        requiredString="delete"
        promptText="请输入 'delete' 以确认删除："
        defaultValue=""
        onConfirm={handleConfirm} // 传入回调函数
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

功能说明

onConfirm 参数：这是一个可选的回调函数，当用户输入正确的确认词并点击“确定”按钮时，会触发该回调函数。
灵活性：你可以根据需要在回调函数中实现删除操作、更新状态或其他逻辑。
默认行为：如果没有传入 onConfirm 回调函数，模态框仍然会正常工作，但不会执行额外的逻辑。

这样，你就可以在用户确认操作后执行自定义逻辑，同时保持组件的灵活性和可扩展性。