StimulusJS中Target在hideAttachments方法中未定义，但querySelector可用

核心问题是函数调用时的this指向丢失：当你通过setInterval(this.hideAttachments, 5000)传递函数时，hideAttachments的this会绑定到全局对象（浏览器环境下为window），而非Stimulus控制器实例，因此无法访问控制器的target属性，导致this.attachmentInputTarget返回undefined。

修复方案 #

以下三种方式均可解决this指向问题：

1. 箭头函数包裹调用

箭头函数会自动继承当前上下文的this（即控制器实例）：

openAttachments(){
    this.attachmentInputTarget.click()
    this.attachmentInputTarget.removeAttribute("hidden")
    setInterval(() => this.hideAttachments(), 5000)
}

2. 使用bind显式绑定this

通过bind方法将函数的this强制绑定到控制器实例：

openAttachments(){
    this.attachmentInputTarget.click()
    this.attachmentInputTarget.removeAttribute("hidden")
    setInterval(this.hideAttachments.bind(this), 5000)
}

3. 提前缓存控制器实例

在方法内将控制器实例存入变量，在定时器回调中使用该变量：

openAttachments(){
    const controller = this
    this.attachmentInputTarget.click()
    this.attachmentInputTarget.removeAttribute("hidden")
    setInterval(function() {
        controller.hideAttachments()
    }, 5000)
}

额外优化建议 #

• 修复this指向后，建议移除document.querySelector这类硬编码DOM选择器，改用Stimulus的target属性，更符合框架设计规范。
• 清理定时器防止内存泄漏：若控制器可能被销毁（如页面导航、元素移除），需在disconnect方法中清除定时器：

export default class extends Controller {
    static targets = ["messageInput", "sendBtn", "attachmentInput"]
    #timerId = null // 使用私有变量存储定时器ID

    connect() {
        this.inputIsEmpty()
    }

    openAttachments(){
        this.attachmentInputTarget.click()
        this.attachmentInputTarget.removeAttribute("hidden")
        this.#timerId = setInterval(() => this.hideAttachments(), 5000)
    }

    hideAttachments(){
        if (!this.attachmentInputTarget.files[0]) {
            this.attachmentInputTarget.setAttribute("hidden", "hidden")
        } else {
            this.attachmentInputTarget.removeAttribute("hidden")
        }
    }

    disconnect() {
        if (this.#timerId) clearInterval(this.#timerId)
    }
}

内容的提问来源于stack exchange，提问作者Phil-6