Salesforce LWC组件New Correspondence按钮点击无响应问题排查

你定义的跟踪属性showNewCorrespondenceModal与同名的点击事件处理方法冲突了。在JavaScript类中，属性会覆盖同名的方法，导致按钮的onclick绑定找不到对应的函数，所以点击按钮无反应，控制台也没有日志输出。

修改事件处理方法的名称，与跟踪属性名区分开，同时更新HTML中的绑定。

修改后的HTML代码 #

将按钮的onclick绑定改为新的方法名：

<template>
<div class="button-container">
    <lightning-button class="new-correspondence-button" label="New Correspondence" onclick={openNewCorrespondenceModal}></lightning-button>
    <template if:true={hasExistingCorrespondences}>
        <lightning-button class="existing-correspondence-button" label="Select Existing Correspondence" onclick={handleSelectExisting}></lightning-button>
    </template>
</div>

<div class="correspondence-list-container">
    <template if:true={showCorrespondenceList}>
        <c-correspondence-list parent-id={recordId} oncorrespondenceselected={handleCorrespondenceSelected}></c-correspondence-list>
    </template>

    <template if:true={selectedCorrespondenceId}>
        <c-message-list correspondence-id={selectedCorrespondenceId} key={selectedCorrespondenceId}></c-message-list>
        <c-message-input correspondence-id={selectedCorrespondenceId} onmessagesent={handleMessageSent}></c-message-input>
    </template>
</div>

<template if:true={showNewCorrespondenceModal}>
    <c-new-correspondence-modal onclose={hideNewCorrespondenceModal} onsave={createNewCorrespondence}></c-new-correspondence-modal>
</template>
</template>

修改后的JS代码 #

将原方法showNewCorrespondenceModal()重命名为openNewCorrespondenceModal()：

import { LightningElement, api, track, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import createCorrespondence from '@salesforce/apex/MessageService.createCorrespondence';
import getCorrespondences from '@salesforce/apex/MessageService.getCorrespondences';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MessagingApp extends LightningElement {
    @api recordId;
    @api objectApiName;
    @track selectedCorrespondenceId;
    @track showCorrespondenceList = false;
    @track hasExistingCorrespondences = false;
    @track showNewCorrespondenceModal = false; // 跟踪属性保留原名

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    objectInfo;

    get objectType() {
        return this.objectInfo.data ? this.objectInfo.data.apiName : null;
    }

    connectedCallback() {
        console.log('connectedCallback called');
        this.checkExistingCorrespondences();
    }

    handleCorrespondenceSelected(event) {
        console.log('handleCorrespondenceSelected called with event:', event);
        this.selectedCorrespondenceId = event.detail;
        this.showCorrespondenceList = false;
    }

    // 方法名修改为openNewCorrespondenceModal
    openNewCorrespondenceModal() {
        console.log('openNewCorrespondenceModal called');
        this.showNewCorrespondenceModal = true; 
        console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
    }

    hideNewCorrespondenceModal() {
        console.log('hideNewCorrespondenceModal called');
        this.showNewCorrespondenceModal = false; 
        console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
    }

    createNewCorrespondence(event) {
        console.log('createNewCorrespondence called with event:', event);
        const subject = event.detail.subject;
        if (!subject) {
            console.log('Subject is required');
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Subject is required',
                    variant: 'error'
                })
            );
            return;
        }

        console.log('Creating correspondence with subject:', subject);

        createCorrespondence({
            parentId: this.recordId,
            parentObjectType: this.objectType,
            correspondenceName: subject
        })
        .then(correspondenceId => {
            console.log('Correspondence created with ID:', correspondenceId);
            this.selectedCorrespondenceId = correspondenceId;
            this.showNewCorrespondenceModal = false; 
            console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
        })
        .catch(error => {
            console.error('Error creating correspondence:', error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Failed to create correspondence',
                    variant: 'error'
                })
            );
        });
    }

    handleSelectExisting() {
        console.log('handleSelectExisting called');
        this.showCorrespondenceList = true;
    }

    checkExistingCorrespondences() {
        console.log('checkExistingCorrespondences called');
        getCorrespondences({ parentId: this.recordId })
        .then(data => {
            console.log('Existing correspondences:', data);
            this.hasExistingCorrespondences = data.length > 0;
        })
        .catch(error => {
            console.error('Error fetching correspondences:', error);
        });
    }

    handleMessageSent() {
        console.log('handleMessageSent called');
        this.template.querySelector('c-message-list').refreshMessages();
    }
}

重新部署组件后，点击「New Correspondence」按钮，控制台会输出openNewCorrespondenceModal called的日志，模态框也会正常显示。

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