Discord中点击提交按钮关闭当前消息的实现方法

核心逻辑 #

要关闭当前包含菜单和按钮的消息，本质是删除或清空原消息内容，完成数据提交后再发送新的选择菜单。以下分两种常见场景给出具体实现：

场景1：Discord机器人（Discord.js v14） #

在按钮的交互回调中，先处理原消息的移除/清空，再执行数据提交和新菜单发送：

// 假设已创建初始选择菜单和提交按钮
const selectMenu = new StringSelectMenuBuilder()
  .setCustomId('initial-select')
  .addOptions(
    { label: '选项A', value: 'opt_a' },
    { label: '选项B', value: 'opt_b' }
  );

const submitBtn = new ButtonBuilder()
  .setCustomId('submit-action')
  .setLabel('提交')
  .setStyle(ButtonStyle.Primary);

// 监听按钮交互
client.on('interactionCreate', async interaction => {
  if (!interaction.isButton() || interaction.customId !== 'submit-action') return;

  // 1. 获取用户选中的菜单值（按需）
  const selectedVal = interaction.message.components[0].components[0].values[0];

  // 2. 关闭当前消息：二选一即可
  // 方式一：清空原消息的内容和组件（保留消息占位）
  await interaction.update({ content: '', components: [] });
  // 方式二：直接删除原消息
  // await interaction.deleteReply();

  // 3. 提交数据（替换为你的业务逻辑，比如存数据库）
  await yourDataSubmitFunction(selectedVal);

  // 4. 发送新的选择菜单
  const newSelectMenu = new StringSelectMenuBuilder()
    .setCustomId('new-select')
    .addOptions(
      { label: '新选项1', value: 'new_opt1' },
      { label: '新选项2', value: 'new_opt2' }
    );
  await interaction.channel.send({
    components: [new ActionRowBuilder().addComponents(newSelectMenu)]
  });
});

场景2：Web前端（HTML+原生JS） #

通过DOM操作直接隐藏或移除包含菜单和按钮的容器，再完成数据提交和新菜单展示：

<!-- 初始菜单容器 -->
<div id="current-menu-wrap">
  <select id="initial-select">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
  </select>
  <button id="submit-btn">提交</button>
</div>

<!-- 新菜单容器（初始隐藏） -->
<div id="new-menu-wrap" style="display: none;">
  <select id="new-select">
    <option value="new1">新选项1</option>
    <option value="new2">新选项2</option>
  </select>
</div>

<script>
document.getElementById('submit-btn').addEventListener('click', async () => {
  // 1. 获取选中值
  const selectedVal = document.getElementById('initial-select').value;

  // 2. 关闭当前菜单：隐藏或移除容器
  document.getElementById('current-menu-wrap').style.display = 'none';
  // 或直接移除容器：document.getElementById('current-menu-wrap').remove();

  // 3. 提交数据（示例：通过POST请求发送）
  await fetch('/your-submit-api', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ selected: selectedVal })
  });

  // 4. 显示新菜单
  document.getElementById('new-menu-wrap').style.display = 'block';
});
</script>

通用注意事项 #

• 若使用其他平台（如Slack、Teams）的交互组件，核心逻辑一致：调用平台提供的消息删除/更新API处理原消息，再发送新组件
• 确保操作权限：机器人需拥有消息管理权限，前端需保证DOM元素选择器正确

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