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

2024-04-06

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

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")还透露,风格已成功从初级转变为危险。

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

style-property 似乎不是只读的:https://discord.js.org/#/docs/main/stable/class/MessageButton?scrollTo=style https://discord.js.org/#/docs/main/stable/class/MessageButton?scrollTo=style

那么我做错了什么?


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

要摆脱“此交互失败”错误,您需要respond https://discord.com/developers/docs/interactions/receiving-and-responding#responding-to-an-interaction到互动。一种响应方法是使用MessageComponentInteraction.update() https://discord.js.org/#/docs/main/stable/class/MessageComponentInteraction?scrollTo=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
            });

        }
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Discord.js - 如何更改按钮的样式 的相关文章

  • 从数组数组中获取唯一值[重复]

    这个问题在这里已经有答案了 我有以下数组 let arr email protected cdn cgi l email protection email protected cdn cgi l email protection email
  • 如何使用nodeJS SFTP客户端列出所有子目录?

    有趣的节点 JS ssh2 sftp client 我想列出给定路径中的所有目录及其子目录 let sftp new ssh2SftpClient console log sftp sftp connect host xx xxx xxx
  • angularjs 自定义过滤器检查数据数组内的值

    我有两个过滤器 它们根据数据中的队列键过滤数据 这是我的代码 var app angular module app app controller mainController function scope Data object scope
  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其
  • 从 Angular 6 服务中绑定图像

    我有一个端点 它根据某些参数为我提供图像 这不是一个图像网址 而是一个普通图像 因此 当我到达邮递员中的端点时 作为响应 我收到一张图像 JPG 我是否可以在变量中接收该图像并将其绑定到 HTML 标签中 所有问题都有将图像 url 映射到
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 将参数传递给 jquery 单击事件中的回调函数[重复]

    这个问题在这里已经有答案了 直接进入正题 我有一个 jquery 事件监听器 如下所示 number click printNumber 和一个回调函数 function printNumber number console log num
  • Ember.js 数组作为模型的属性

    干杯 我有一些模型 它的一个属性是一个数组 但由于某些原因 我在服务器上使用 mongoDB 并且它是嵌入式模型和 ember data 的问题 我不能做这样的事情 App Foo DS Model extend numbers DS ha
  • 为什么 JSON.stringify() 接受 Date 对象?

    至少在 Firefox 中 您可以对 Date 对象进行字符串化 gt gt gt JSON stringify now new Date now 2012 04 23T18 44 05 600Z 这是有效的 因为 在 Firefox 中
  • 拖放图像上传在服务器上不起作用

    我正在尝试实现拖放图像上传 我在网上找到了一个相当简单的脚本并适合我的使用 在我的本地安装中 文件上传得很好 但在服务器上却不行 从我的调试尝试来看 SERVER HTTP X FILENAME 甚至没有被 php 设置 我尝试了以下方法
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • 传单 - 导入 Geojson - Angular 6

    我尝试将 GeoJson 文件导入到 Angular 的应用程序 6 中的传单中 通过这个解决方案 我的 geojson 是在 leafletmap 中绘制的 但我有这个错误 我无法构建我的应用程序 有人知道一种解决方案吗 错误 TS234
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • Niceedit本地上传图片失败

    我是这样称呼编辑的 new nicEditor buttonList bold italic underline upload iconsPath img nicedit png uploadURI http server com inte
  • 如何在 Astro 中的组件之间共享状态?

    我相信我在代码中采用了错误的方法 如何在按钮单击中设置客户端首选项 该按钮单击用作全局 astro 组件中的道具 或者我应该怎么做 我知道这是可能的 因为 astro js 本身在他们的文档网站中这样做了 下面是我的尝试的解释 我目前正在开
  • 如何在javascript中解析 yyyy-MM-dd HH:mm:ss.SSS 格式的日期?

    const time 2016 11 16 00 00 00 000 const date new Date time console info date 似乎 safari 无法解析 yyyy MM dd HH mm ss SSS 格式日
  • Firestore != 查询错误:“”!=”类型的参数无法分配给“WhereFilterOp”类型的参数。ts(2345)

    我的打字稿编译器有问题 此查询出现错误 const xxx admin firestore collection xxx where end timestampDate where end lt timestampDate get 错误 类
  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array
  • 当 jQuery .remove() 用于删除脚本标签时,它是否会清除加载的 JavaScript?

    正如标题所示 如果我使用以下命令从 DOM 中删除脚本标签 scriptid remove javascript 本身是保留在内存中还是被清除了 或者 我完全误解了浏览器处理 javascript 的方式吗 这是很有可能的 对于那些对我提问

随机推荐