如何使用Context API实现原生JavaScript风格的确认模态框？

1. 完善Context的状态与方法 #

首先需要在Context中扩展状态，新增确认、取消的回调存储，同时修改open方法支持传入自定义回调：

// context.js
import { createContext, useContext, useState } from "react";

const ConfirmContext = createContext();

export function ConfirmProvider({ children }) {
  const [state, setState] = useState({
    isOpen: false,
    title: "",
    content: "",
    onConfirm: () => {}, // 存储确认回调
    onCancel: () => {}   // 存储取消回调
  });

  const confirm = {
    open: ({ title, content, onConfirm, onCancel }) => {
      setState({
        isOpen: true,
        title,
        content,
        // 兜底空函数避免报错
        onConfirm: onConfirm || (() => {}),
        onCancel: onCancel || (() => {})
      });
    },
    close: () => {
      setState(prev => ({ ...prev, isOpen: false }));
    }
  };

  return (
    <ConfirmContext.Provider value={{ state, confirm }}>
      {children}
    </ConfirmContext.Provider>
  );
}

export function useConfirm() {
  return useContext(ConfirmContext);
}

2. 模态框组件绑定回调触发逻辑 #

在模态框组件中，给OK/Cancel按钮绑定点击事件，触发Context中存储的回调并关闭模态框：

// 假设你的模态框组件是ConfirmModal.js
import { useConfirm } from "./context";

export default function ConfirmModal() {
  const { state, confirm } = useConfirm();

  if (!state.isOpen) return null;

  const handleConfirm = () => {
    state.onConfirm(); // 执行用户传入的确认逻辑
    confirm.close();   // 关闭模态框
  };

  const handleCancel = () => {
    state.onCancel();  // 执行用户传入的取消逻辑
    confirm.close();   // 关闭模态框
  };

  return (
    <div className="modal-overlay">
      <div className="modal">
        <h3>{state.title}</h3>
        <p>{state.content}</p>
        <div className="modal-buttons">
          <button onClick={handleConfirm}>OK</button>
          <button onClick={handleCancel}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

3. 在Delete组件中传入自定义回调 #

调用confirm.open时，直接传入OK/Cancel按钮对应的业务逻辑即可：

// Delete.js
import { useConfirm } from "./context";

export default function DeleteButton() {
  const { confirm } = useConfirm();

  const handleDeleteClick = () => {
    confirm.open({
      title: "确认删除",
      content: "你确定要删除这条数据吗？",
      // OK按钮点击后的逻辑：这里写实际删除操作
      onConfirm: () => {
        console.log("执行删除API请求");
        // 示例：删除成功后的提示或状态更新
        alert("删除完成");
      },
      // Cancel按钮点击后的逻辑：可选，比如提示取消操作
      onCancel: () => {
        console.log("用户取消删除");
        alert("已取消删除");
      }
    });
  };

  return <button onClick={handleDeleteClick}>删除</button>;
}

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