Fluent UI React中Dialog组件按钮点击反馈处理方案问询

要区分Dialog中「Send」和「Don't send」按钮的点击，核心是不能让两个按钮共用同一个处理函数，或者在共用函数中通过参数区分操作类型。以下是两种可行的实现方案：

方案一：为每个按钮绑定独立处理函数 #

直接给两个按钮分别定义专属的点击处理逻辑，代码清晰直观：

首先在组件内部添加两个处理函数：

// 处理Send按钮点击
const handleSend = () => {
  alert("sent");
  toggleHideDialog(); // 调用原有的隐藏弹窗方法
};

// 处理Don't send按钮点击
const handleCancel = () => {
  alert("canceled");
  toggleHideDialog();
};

然后修改DialogFooter中的按钮绑定：

<DialogFooter>
  <PrimaryButton onClick={handleSend} text="Send" />
  <DefaultButton onClick={handleCancel} text="Don't send" />
</DialogFooter>

方案二：通过自定义参数复用处理函数 #

如果两个按钮的逻辑有较多重复部分，可以复用同一个函数，通过传递自定义参数区分操作类型：

首先定义通用处理函数：

const handleDialogAction = (actionType) => {
  // 根据参数判断操作类型，给出对应提示
  actionType === "send" ? alert("sent") : alert("canceled");
  // 隐藏弹窗
  toggleHideDialog();
};

然后给按钮绑定带参数的函数：

<DialogFooter>
  <PrimaryButton onClick={() => handleDialogAction("send")} text="Send" />
  <DefaultButton onClick={() => handleDialogAction("cancel")} text="Don't send" />
</DialogFooter>

两种方案都能实现需求：点击「Send」时弹出"sent"提示并隐藏弹窗，点击「Don't send」时弹出"canceled"提示并隐藏弹窗。根据实际逻辑复杂度选择即可。

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