如何在 Discord 中创建一个接受用户输入的弹出窗口？

Question

这是我第一次从 Discord 机器人中看到此功能。我试着到处寻找，但似乎我失败了。 Captcha.bot Discord bot 提供了此功能，您可以在其中接受来自 Discord 内弹出窗口的输入。

Captcha.bot 制作的嵌入式消息中有一个按钮，您必须在其中回答验证码测试。按下按钮后，它会创建一个像这样的弹出窗口。

在验证码机器人上放置正确答案后，这是体验的后果。

如果可能的话，我只想学习如何使用 Discord.js 召唤弹出窗口，或者至少了解他们是如何做到的。

Answer 1

这些被称为模态，它们将在下一个主要的 discord.js 版本 v14 中提供。已经有一个pull request 用于此。

更新：v13.7.0 中的模态

模式自v13.7.0 起可用。如果您尝试从 discord-modals 更新您的代码，则存在一些差异：

• 您需要从 discord.js 导入 Modal 和 TextInputComponent
• TextInputComponents 必须在 MessageActionRows 内
• interaction 有一个 showModal() 方法可以打开模式
• interaction 有一个isModalSubmit() 方法来检查它是否是ModalSubmitInteraction
• 没有modalSubmit事件
• 要获得您需要使用的响应interaction.fields.getTextInputValue()

您可以在下面找到完整的代码：

const {
  Client,
  Intents,
  MessageActionRow,
  MessageButton,
  Modal,
  TextInputComponent,
} = require('discord.js');


const TOKEN = 'YOUR TOKEN HERE';
const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES],
});

client.on('messageCreate', (message) => {
  if (message.author.bot) return;

  let button = new MessageActionRow();
  button.addComponents(
    new MessageButton()
      .setCustomId('verification-button')
      .setStyle('PRIMARY')
      .setLabel('Open modal dialog'),
  );
  message.reply({
    components: [button],
  });
});

client.on('interactionCreate', async (interaction) => {
  if (interaction.isButton()) {
    if (interaction.customId === 'verification-button') {
      const modal = new Modal()
        .setCustomId('verification-modal')
        .setTitle('Verify yourself')
        .addComponents([
          new MessageActionRow().addComponents(
            new TextInputComponent()
              .setCustomId('verification-input')
              .setLabel('Answer')
              .setStyle('SHORT')
              .setMinLength(4)
              .setMaxLength(12)
              .setPlaceholder('ABCDEF')
              .setRequired(true),
          ),
        ]);

      await interaction.showModal(modal);
    }
  }

  if (interaction.isModalSubmit()) {
    if (interaction.customId === 'verification-modal') {
      const response =
        interaction.fields.getTextInputValue('verification-input');
      interaction.reply(`Yay, your answer is submitted: "${response}"`);
    }
  }
});

client.once('ready', () => {
  console.log('Bot v13 is connected...');
});

client.login(TOKEN);

上一个答案：使用discord-modals 包

与此同时，您可以使用像 discord-modals 或 discordjs-modal 这样的 npm 包。

您可以在下面找到带有 discord-modals 包的工作示例。不要忘记先使用npm i discord-modals 安装它。

const {
  Client,
  Intents,
  MessageActionRow,
  MessageButton,
} = require('discord.js');
const discordModals = require('discord-modals');
const { Modal, TextInputComponent, showModal } = discordModals;

const TOKEN = 'YOUR TOKEN HERE';
const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES],
});
discordModals(client);

client.on('messageCreate', (message) => {
  if (message.author.bot) return;

  let button = new MessageActionRow();
  button.addComponents(
    new MessageButton()
      .setCustomId('verification-button')
      .setStyle('PRIMARY')
      .setLabel('Open modal dialog'),
  );
  message.reply({
    components: [button],
  });
});

client.on('interactionCreate', async (interaction) => {
  if (interaction.isButton()) {
    if (interaction.customId === 'verification-button') {
      const modal = new Modal() // We create a Modal
        .setCustomId('verification-modal')
        .setTitle('Verify yourself')
        .addComponents([
          new TextInputComponent()
            .setCustomId('verification-input')
            .setLabel('Answer')
            .setStyle('SHORT')
            .setMinLength(4)
            .setMaxLength(12)
            .setPlaceholder('ABCDEF')
            .setRequired(true),
        ]);

      showModal(modal, {
        client,
        interaction,
      });
    }
  }
});

client.on('modalSubmit', async (modal) => {
  if (modal.customId === 'verification-modal') {
    const response = modal.getTextInputValue('verification-input');
    modal.reply(`Yay, your answer is submitted: "${response}"`);
  }
});

client.once('ready', () => {
  console.log('Bot v13 is connected...');
});

client.login(TOKEN);