Discord.js - 如何更改按钮的样式

Question

这就是我创建和发送按钮的方式：

client.on('messageCreate', (message) => {
    /* ... Checking Command ... */

    const actionRow = new MessageActionRow().addComponents(
        new MessageButton()
        .setStyle("PRIMARY")
        .setLabel("X")
        .setCustomId("test"));


    message.channel.send({ content: "Test", components: [actionRow] });
}

正如预期的那样，聊天中会出现一个蓝色按钮。

这是我的按钮监听器：

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        if (interaction.customId === "test") {
            //Before: console.log(interaction.component);

            interaction.component.setStyle("DANGER");

            //After: console.log(interaction.component);
        }
    }
});

在.setStyle("DANGER")之前和之后记录组件对象还显示，样式已成功从 Primary 更改为 Danger。

但是在我的 Discord 客户端中，样式/颜色没有改变，最重要的是我收到一个错误，说交互失败。

样式属性似乎不是只读的： https://discord.js.org/#/docs/main/stable/class/MessageButton?scrollTo=style

那么我做错了什么？

Answer 1

您仅在本地更新了样式，没有将更改的组件发送回 Discord API。

要摆脱错误“此交互失败”，您需要响应交互。 一种响应方式是使用MessageComponentInteraction.update() ，它会更新原始消息。

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        if (interaction.customId === "test") {

            // Change the style of received button component
            interaction.component.setStyle("DANGER");

            // Respond to the interaction,
            // and send updated component to the Discord API
            interaction.update({
                components: [
                    new MessageActionRow().addComponents(interaction.component)
                ]
            });

        }
    }
});

要使用多个按钮进行此操作，请使用以下示例。

client.on("interactionCreate", (interaction) => {
    if (interaction.isButton()) {
        // Make this work only for certain buttons,
        // with IDs like switch_0, switch_1, etc.
        if (interaction.customId.startsWith("switch_")) {

            // Change the style of the button component,
            // that triggered this interaction
            interaction.component.setStyle("DANGER");

            // Respond to the interaction,
            // and send updated components to the Discord API
            interaction.update({
                components: interaction.message.components
            });

        }
    }
});

Answer 2

对于可能使用 Discordjs V14+ 的任何未来查看者，您无法再直接编辑组件，因此您需要重新创建它们才能编辑它们。 这是我想出的一个解决方案，点击时会翻转颜色

const collector = interaction.channel.createMessageComponentCollector({ time: 15000 });
collector.on('collect', async i => {
  //loop through each action row on the embed and update it accordingly
  let newActionRowEmbeds = i.message.components.map(oldActionRow => {

    //create a new action row to add the new data
    updatedActionRow = new ActionRowBuilder();
    
    // Loop through old action row components (which are buttons in this case)
    updatedActionRow.addComponents(oldActionRow.components.map(buttonComponent => {

      //create a new button from the old button, to change it if necessary
      newButton = ButtonBuilder.from(buttonComponent)
      
      //if this was the button that was clicked, this is the one to change!
      if(i.component.customId == buttonComponent.customId){

        //If the button was a primary button then change to secondary, or vise versa
        if(buttonComponent.style == ButtonStyle.Primary){
          newButton.setStyle(ButtonStyle.Secondary)
        }
        else if (buttonComponent.style == ButtonStyle.Secondary){
          newButton.setStyle(ButtonStyle.Primary)
        }
      }
      return newButton
    }));
    return updatedActionRow
  });
  
  // and then finally update the message
  await i.update({components: newActionRowEmbeds})
});