如何在LWC中传递新建Visit Comment ID关联Product对象

核心问题分析 #

创建Visit Comment记录后，无法捕获并传递其ID到后续打开的Product创建模态框，导致无法建立两者的关联关系。

解决方案步骤 #

1. 捕获Visit Comment新建成功后的记录ID #

在lightning-record-form上绑定onsuccess事件，通过事件对象直接获取新建记录的ID：

HTML代码修改（Visit Comment模态框部分）

<template if:true={showVisitCommentModal}>
    <lightning-modal-header label="新建拜访备注"></lightning-modal-header>
    <lightning-modal-body>
        <lightning-record-form
            object-api-name="Visit_Comment__c"
            fields={visitCommentFields}
            onsuccess={handleVisitCommentSuccess}
            record-id={currentEventId}
            mode="edit">
        </lightning-record-form>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="取消" onclick={closeVisitCommentModal}></lightning-button>
    </lightning-modal-footer>
</template>

JS代码新增处理函数

// 组件属性存储新建的Visit Comment ID
currentVisitCommentId;

handleVisitCommentSuccess(event) {
    // 从success事件中提取新建记录ID
    this.currentVisitCommentId = event.detail.id;
    // 关闭当前模态框
    this.closeVisitCommentModal();
    // 刷新数据表格
    this.refreshTable();
    // 触发打开Product模态框
    this.showProductModal = true;
}

2. 在Product模态框中关联Visit Comment ID #

在Product的lightning-record-form中，通过default-fields属性将关联字段的默认值设置为存储的currentVisitCommentId：

HTML代码修改（Product模态框部分）

<template if:true={showProductModal}>
    <lightning-modal-header label="关联产品"></lightning-modal-header>
    <lightning-modal-body>
        <lightning-record-form
            object-api-name="Product__c"
            fields={productFields}
            onsuccess={handleProductSuccess}
            mode="edit"
            default-fields={productDefaultFields}>
        </lightning-record-form>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="取消" onclick={closeProductModal}></lightning-button>
    </lightning-modal-footer>
</template>

JS代码定义默认字段

get productDefaultFields() {
    return {
        // 替换为实际的Visit Comment关联字段API名称
        Visit_Comment__c: this.currentVisitCommentId
    };
}

3. 重置状态避免脏数据 #

关闭Product模态框时，重置存储的ID，防止下次打开模态框时携带旧数据：

closeProductModal() {
    this.showProductModal = false;
    this.currentVisitCommentId = undefined;
}

关键注意事项 #

• 替换代码中所有对象、字段的API名称为业务实际使用的名称（比如Visit_Comment__c、关联字段Visit_Comment__c等）
• default-fields属性会自动将关联字段赋值，无需手动输入，确保Product记录与新建的Visit Comment绑定

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