Salesforce LWC中根据选项列表选择显示/隐藏复选框问题

问题场景 #

开发Student__c记录添加表单时，TypeOfStudy__c是包含Full-time和Part-time的选项列表，需求是用户选择Part-time时显示Payer__c复选框，否则隐藏，但当前选择Part-time时复选框未显示。

问题根源 #

1. 选项值大小写不匹配：Salesforce选项列表的API值区分大小写，代码中判断的'Part-Time'可能和实际选项的API值（比如'Part-time'）不一致
2. 响应式更新失效：直接修改对象属性（this.contactRecord[e.currentTarget.fieldName] = e.target.value）不会触发LWC的响应式渲染，组件无法感知字段值变化
3. 命名混淆：导入的对象命名为CONTACT_OBJECT但实际操作的是Student__c，容易引发误解

修正方案及代码 #

方案一：维护响应式记录对象 #

修改JS代码，确保字段值变更能触发组件重新渲染，并匹配正确的选项值：

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
// 修正对象命名，与实际操作对象一致
import STUDENT_OBJECT from '@salesforce/schema/Student__c';

export default class Poc extends LightningElement {
    // 初始化空记录对象，无需@track，通过重新赋值引用实现响应式
    studentRecord = {};

    handleFieldChange(e) {
        // 使用展开运算符重新赋值对象，确保响应式更新
        this.studentRecord = {
            ...this.studentRecord,
            [e.currentTarget.fieldName]: e.target.value
        };
    }

    get showBonus() {
        // 匹配Salesforce中TypeOfStudy__c选项的实际API值（需确认大小写）
        return this.studentRecord.TypeOfStudy__c === 'Part-time';
    }

    saveForm() {
        console.log('Student for save => ', JSON.stringify(this.studentRecord));
        createRecord({ apiName: STUDENT_OBJECT.objectApiName, fields: this.studentRecord })
            .then(student => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '成功',
                        message: '学生记录已创建，ID：' + student.id,
                        variant: 'success'
                    })
                );
            })
            .catch((error) => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '创建记录失败',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }
}

方案二：直接从表单获取字段值（更简洁） #

无需维护记录对象，直接通过DOM查询获取TypeOfStudy__c的当前值：

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import STUDENT_OBJECT from '@salesforce/schema/Student__c';

export default class Poc extends LightningElement {
    get showBonus() {
        // 直接查询表单中的TypeOfStudy__c字段
        const typeField = this.template.querySelector('lightning-input-field[field-name="TypeOfStudy__c"]');
        // 可选链操作符避免字段未加载时的报错
        return typeField?.value === 'Part-time';
    }

    saveForm() {
        // 从lightning-record-edit-form中获取所有字段值
        const fields = {};
        this.template.querySelectorAll('lightning-input-field').forEach(field => {
            fields[field.fieldName] = field.value;
        });
        
        console.log('Student for save => ', JSON.stringify(fields));
        createRecord({ apiName: STUDENT_OBJECT.objectApiName, fields })
            .then(student => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '成功',
                        message: '学生记录已创建，ID：' + student.id,
                        variant: 'success'
                    })
                );
            })
            .catch((error) => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '创建记录失败',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }
}

关键注意事项 #

• 确认选项API值：在Salesforce对象管理器中查看TypeOfStudy__c的选项列表，确保代码中的值与API值完全一致（包括大小写）
• 响应式更新规则：LWC中只有当属性的引用发生变化时才会触发重新渲染，对于对象类型，直接修改属性不会生效，必须重新赋值整个对象
• 模板无需修改：原模板代码逻辑正确，只需调整JS代码即可实现需求

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