使用按钮从数组创建页面

时间:2021-06-06 22:07:36

标签: button discord discord.js discord-buttons

我在使用 discord-buttons 创建“下一页”和“上一页”按钮时遇到了一些困难。

到目前为止,我的命令所做的是从格式如下的数组中获取角色信息:

{ role: 'hot rod red', color: '#fc0000' , price: 25000, roleid: '733373020491481219', id: 'red' }

然后为每个角色创建嵌入。到目前为止,我拥有的代码一次发送所有角色都没有问题,但我试图让他们一次发送一个,当按下“下一页”按钮时,消息会编辑,然后转到下一个角色嵌入到该数组中,一直到最后。由于不和谐按钮是相当新的,所以关于它们的信息还没有那么多,所以感谢任何帮助,谢谢! (请让我知道我需要提供更多代码)

1 个答案:

答案 0 :(得分:0)

Buttons 基本上是使用反应的一种替代方法。对于类似页面的系统,它的工作原理几乎相同。您发送带有反应/按钮的消息,等待反应,然后编辑消息。

有一些区别:

  • 按钮会立即应用于消息,之后无需添加。
  • 按钮需要在按下后 3 秒内得到响应,以避免用户在屏幕上看到“此交互失败”。
  • 进行交互时,同一用户无法再次与消息上的按钮进行交互,直到机器人确认或交互超时。
  • 用户无法删除按钮

这意味着按钮对于编辑其所在的消息等操作非常有用,但对于切换角色等操作则没有那么有用。

每条消息可以有 5 个 ActionRow,每个 ActionRow 可以有 5 个 Button(共 25 个)

按钮具有标签、样式和自定义 ID(或 URL,如果它是“URL 样式”按钮)。

由于您使用的是 discord-buttons,因此您可以执行以下操作来发送带有按钮的消息:

const { MessageActionRow, MessageButton } = require("discord-buttons");

// create a row!
const row = new MessageActionRow(),
  backButton = new MessageButton()
    .setLabel("Back")
    // https://discord.com/developers/docs/interactions/message-components#buttons-button-styles
    .setStyle("blurple"),
    // identifies the button, so you can know which button was pressed
    .setID("back"),
  nextButton = new MessageButton()
    .setLabel("Next")
    .setStyle("blurple")
    .setID("next");
row.addComponent(backButton).addComponent(nextButton);

const pages = [
  "Hello",
  "World",
  "Foo",
  "Bar"
];
let index = 0;

const message = await channel.send(pages[index], {
  component: row
});

然后,您可以使用 discord-buttons 提供的方法或 wait events 进行交互:

discord-buttons 扩展了常规 discord.js 类的功能,因此可以使用类似的选项。

function handleInteractions() {
  // originalMessage is the message sent by the user to activate this 'command'
  const filter = (button) => button.clicker.user.id === originalMessage.author.id;
  const clickedButton = (await message.awaitButtons(filter, {
    max: 1, // how many to collect
    time: 60000 // how long to wait in milliseconds
  })).first();

  // check if a button was actually clicked
  if (clickedButton) {

    // IMPORTANT: Respond to the interaction to prevent false errors on the user's side.
    // https://discord-buttons.js.org/events/clickbutton#functions

    // Acknowledges the interaction, doesn't send or edit anything
    // You may find it easier to use a different method to acknowledge and edit/send a new message, but in this example, the message will be edited normally.
    await clickedButton.defer();

    if (clickedButton.id === "back") {
      index--;
    } else {
      index++;
    }
    // constrain the pages
    if (index < 0) index = pages.length - 1;
    if (index >= pages.length) index = 0;

    // edit your message!
    message.edit(pages[index]);

    // re-listen to button clicks
    handleInteractions();

  } else {
    // It may be useful to delete the message or remove the buttons from the 
    // message once you are no longer listening to the events.
    message.edit({components: []});
  }
}
handleInteractions();
相关问题