Bot in Discord with discord.js (11)

else if (interaction.isChatInputCommand()) {
	console.log("a modal!");
}

const { Events, ModalBuilder } = require('discord.js');

const modal = new ModalBuilder()
	.setCustomId('myModal')
	.setTitle('My Modal');

	// TODO: Add components to modal...
};

const { ActionRowBuilder, ModalBuilder, SlashCommandBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('modal')
        .setDescription('Replies with a pop-up form!'),
    async execute(interaction) {

        const modal = new ModalBuilder()
            .setCustomId('myModal')
            .setTitle('My Modal');

        // 向交互组件里添加一个 Modal
        // 创建文本输入域
        const favoriteColorInput = new TextInputBuilder()
            .setCustomId('favoriteColorInput')
            // Label 是用户看到的有关该域 的提示语，用来告诉用户这里是该填什么的
            .setLabel("What's your favorite color?")
            // "Short" 意味着该域接受一行文本输入
            // TextInputStyle 只有两种值： .Short 和 .Paragraph
            .setStyle(TextInputStyle.Short)
            // .SetRequired(true) 意味着该文本域必填
            .setRequired(true)
            // 为该文本域设置一个占位符，占位符不是预先写好的值
            .setPlaceholder("Blurple");

        const hobbiesInput = new TextInputBuilder()
            .setCustomId('hobbiesInput')
            .setLabel("What's some of your favorite hobbies?")
            // "Paragraph" 意味着该域是个大文本框，接受多行输入
            .setStyle(TextInputStyle.Paragraph)
            // 设置该域必填
            .setRequired(false)
            // 为该域设置一个预先写好的值，不是占位符
            .setValue("Touching grass outside occasionally.")

        const numberInput = new TextInputBuilder()
            .setCustomId('numberInput')
            .setLabel ("Which year did you first use Discord?")
            .setStyle(TextInputStyle.Short)
            .setRequired(true)
            .setPlaceholder("2022")
            // 设置文本最小长度
            .setMinLength(4)
            // 设置文本最大长度
            .setMaxLength(4);

        // 一个 ActionRow 只能拥有一个 TextInput,
        // 所以你需要三个 ActionRow 来维护三个 TextInput
        const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
        const secondActionRow = new ActionRowBuilder().addComponents(hobbiesInput);
        const thirdActionRow = new ActionRowBuilder().addComponents(numberInput);

        // 为表单 Modal 添加三个 ActionRow 组件
        modal.addComponents(firstActionRow, secondActionRow, thirdActionRow);

        // 向执行斜杠命令的用户展示 Modal
        // interaction.interaction.showModal(modal) 必须是斜杠命令的第一条回复，而不能是 .reply()
        // 你甚至不能 .defer() 或者 .deferUpdate()，第一条必须是 .showModal()。
        await interaction.showModal(modal);


        // 一旦用户提交了填写完了的 Modal，我们就抓取这个 ModalSubmitInteraction
        const submitted = await interaction.awaitModalSubmit({
            // 为有效 Modal 的填写设置超时 60000 毫秒，即 60 秒
            time: 60000,
            // 确保我们的 Modal 填写者是最初发起斜杠命令的那个人
            filter: i => {
                if (i.user.id === interaction.user.id && i.customId === 'myModal') {
                    return true;
                }},
        }).catch(error => {
            // 捕获任何抛出的 error (e.g. awaitModalSubmit 60 秒后 超时了)
            console.error(error)
            return null
        })

        // 只要我们获取到了有效提交的 Modal，我们就能干我们该干的事了
        // 记住，一份 Modal 可以具有多个 ActionRow，而一个 ActionRow 只有一个 TextInputComponent。
        // 你可以使用 ModalSubmitInteraction.fields 再凭借 customId 来获取用户在某个文本域输入的值
        if (submitted) {
            // 提取用户输入的数据
            const favoriteColor = submitted.fields.getTextInputValue('favoriteColorInput');
            const hobbies = submitted.fields.getTextInputValue('hobbiesInput');
            const number = submitted.fields.getTextInputValue('numberInput');
            console.log({ favoriteColor, hobbies, number });
            await submitted.reply({
                content: `Your fav color is ${favoriteColor}, you like ${hobbies}, you claimed that you registered Discord in ${number}.`
            })
        }
    },
};