Salesforce LWC按钮全局生效：点击单按钮触发所有项显示日期输入框

问题根源 #

你当前使用了一个全局的showEditField变量，所有通过for:each循环渲染的订阅项都绑定了这个变量。当点击任意Extend按钮切换它的值时，所有项的输入框都会同步显示/隐藏，这不符合你“仅对应项显示”的需求。

解决方案 #

需要为每个订阅项单独维护显示状态，通过记录当前激活编辑的订阅项ID来实现精准控制：

1. 修改JavaScript代码

替换全局布尔变量为存储激活ID的对象，同时实现点击事件的处理逻辑：

import { LightningElement, api, track, wire } from 'lwc';
import getSubscriptionsLWC from '@salesforce/apex/YourApexClass.getSubscriptionsLWC'; // 确保引用正确的Apex类

export default class ExtendCPQSubscriptionLWC extends LightningElement {
    @api recordId;
    @track subscriptionData;
    @track columns = columns;
    // 用对象存储激活编辑的订阅项ID，键为ID，值为布尔值
    activeEditIds = {};

    @wire(getSubscriptionsLWC, { recordId: '$recordId'})
    loadFoundSubscriptions({error, data}) {
        if (data) {
            console.log('OK');
            console.log(data);
            this.subscriptionData = data;
        } else if (error) {
            console.log('ERR ' + JSON.stringify(error));
        }
    }

    handleShowEditEndDate(event) {
        // 获取点击按钮对应的订阅项ID
        const subId = event.target.dataset.id;
        // 切换该ID的激活状态：已激活则取消，未激活则开启
        this.activeEditIds = {
            ...this.activeEditIds,
            [subId]: !this.activeEditIds[subId]
        };
    }
}

2. 修改HTML模板

• 给Extend按钮添加data-id属性传递当前项ID
• 修改输入框的显示判断逻辑，检查当前项ID是否在activeEditIds中：

<template>
    <template if:true={subscriptionData}>
        <template for:each={subscriptionData} for:item="subscriptionItem">
            <div key={subscriptionItem.Id}>
                <div>
                    <div class="slds-grid slds-gutters slds-grid_vertical-align-center">
                        <div class="slds-col custom-card-title-container">
                            <h2 class="custom-title">{subscriptionItem.SBQQ__ProductName__c}</h2>
                        </div>
                        <div class="slds-col button-custom">
                            <!-- 添加data-id传递当前订阅项ID -->
                            <lightning-button 
                                label="Extend" 
                                title="Non-primary action" 
                                onclick={handleShowEditEndDate} 
                                data-id={subscriptionItem.Id}
                                class="slds-m-right_none custom-margin">
                            </lightning-button>
                        </div>
                    </div>
                    
                    <div class="slds-grid slds-m-top_xx-small">
                        <div class="slds-col">
                            <div class="slds-grid slds-grid_vertical">
                                <div class="slds-col slds-m-bottom_xx-small">
                                    <span>Start Date</span>
                                </div>
                                <div class="slds-col">
                                    <span>{subscriptionItem.SBQQ__StartDate__c}</span>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col">
                            <div class="slds-grid slds-grid_vertical">
                                <div class="slds-col slds-m-bottom_xx-small">
                                    <span>End Date</span>
                                </div>
                                <div class="slds-col">
                                    <span>{subscriptionItem.SBQQ__EndDate__c}</span>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col">
                            <div class="slds-grid slds-grid_vertical">
                                <div class="slds-col slds-m-bottom_xx-small">
                                    <span>Quantity</span>
                                </div>
                                <div class="slds-col">
                                    <span>{subscriptionItem.SBQQ__Quantity__c}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 修改判断逻辑：检查当前项ID是否处于激活状态 -->
                    <template if:true={activeEditIds[subscriptionItem.Id]}>
                        <lightning-layout multiple-rows class="slds-m-top_xx-small">
                            <lightning-layout-item size="8">
                                <lightning-input 
                                    type="date" 
                                    name="endDateInput" 
                                    label="End Date" 
                                    variant="label-inline"
                                    value={subscriptionItem.SBQQ__EndDate__c} <!-- 可选：默认填充原有结束日期 -->
                                    >
                                </lightning-input>
                            </lightning-layout-item>
                        </lightning-layout>
                    </template>
                    <hr class = "custom-line">
                </div>
            </div>
        </template>
    </template>
</template>

额外说明 #

如果需要实现“点击其他按钮时关闭之前的输入框”，可以修改handleShowEditEndDate方法，清空activeEditIds后再添加当前ID：

handleShowEditEndDate(event) {
    const subId = event.target.dataset.id;
    // 只保留当前点击的项为激活状态，关闭其他项
    this.activeEditIds = { [subId]: !this.activeEditIds[subId] };
    // 若需要点击后强制显示当前项（不切换），可改为：
    // this.activeEditIds = {};
    // this.activeEditIds[subId] = true;
}

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