为何无法将代码移出Salesforce LWC的事件处理器？

核心问题原因 #

在LWC的类组件中，调用类内部的实例方法必须通过this关键字引用。你修改后的代码直接调用refreshSearchResults()，而非this.refreshSearchResults()，导致JavaScript无法定位到该方法，进而引发脚本错误或无响应。

另外，handleShowContactChange方法存在逻辑遗漏：当取消勾选复选框时，没有触发刷新方法，导致界面不会同步更新状态。

修正后的事件处理器代码 #

handleShowContactChange(event) {
    const val = event.target.value;
    this.showContacts = val === 'showContactsYes';
    this.refreshSearchResults();
}

handleKeyUp(event) {
    const val = event.target.value;
    this.searchString = val;
    if (this.searchString) {
        this.refreshSearchResults();
    } else {
        this.showResults = false;
    }
}

同时建议修正refreshSearchResults方法中的错误日志标识，避免混淆：

refreshSearchResults() {
    getMatchingAccounts({ searchString: this.searchString, showContacts: this.showContacts })
        .then(result => {
            this.showResults = true;
            this.searchResults = result;
        })
        .catch(error => {
            this.showResults = false;
            console.log('Error in refreshSearchResults');
            console.log(error);
        });
}

补充说明 #

• LWC基于ES6类语法，类的实例方法必须通过this访问，这是JavaScript类的基础规则。
• 简化showContacts的赋值逻辑，直接用this.showContacts = val === 'showContactsYes'替代冗余的条件判断，让代码更简洁易读。

内容的提问来源于stack exchange，提问作者jkurant