在Lightning Record Edit Form中使用lightning-input的问题求助

lightning-input-field是与lightning-record-edit-form深度绑定的组件，会自动将字段值关联到目标记录并处理提交逻辑。而lightning-input是通用输入组件，不会自动和表单的记录绑定，所以仅更新track变量无法同步到Salesforce对象。

解决步骤：

• 给lightning-input绑定onchange事件，实时收集输入值到专门的表单数据对象（避免直接修改原variable数组导致的引用更新问题）。
• 在保存按钮的点击事件中，调用updateRecordAPI提交修改后的数据，或配合表单的submit事件处理提交逻辑。

示例代码调整：

HTML部分 #

<lightning-record-edit-form record-id={recordId} object-api-name={objectName}>
   <template for:each={variable} for:item="item">
      <div lwc:if={item.isFruit} key={item.id} >
        <lightning-input 
          data-type="user-input"  
          name={item.name}  
          value={item.value}
          onchange={handleInputChange}
        ></lightning-input>
      </div>
   </template>
   <lightning-button label="Save" onclick={handleSave}></lightning-button>
   <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
</lightning-record-edit-form>

JS部分 #

import { LightningElement, track, api } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CustomRecordForm extends LightningElement {
    @api recordId;
    @api objectName;
    @track variable = [/* 你的初始数据数组 */];
    @track formData = {};

    connectedCallback() {
        // 初始化表单数据映射
        this.variable.forEach(item => {
            this.formData[item.name] = item.value;
        });
        // 提前处理问题2的判断属性
        this.variable = this.variable.map(item => ({
            ...item,
            isFruit: item.value === 'apple' || item.value === 'banana'
        }));
    }

    handleInputChange(event) {
        const { name, value } = event.target;
        // 更新表单数据对象
        this.formData = { ...this.formData, [name]: value };
        // 同步更新variable数组的对应值
        this.variable = this.variable.map(item => 
            item.name === name ? { ...item, value } : item
        );
    }

    handleSave() {
        const recordInput = {
            fields: {
                Id: this.recordId,
                ...this.formData
            }
        };

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '成功',
                        message: '记录已更新',
                        variant: 'success'
                    })
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: '更新失败',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }

    handleCancel() {
        // 重置表单到初始状态
        this.connectedCallback();
    }
}

LWC的HTML模板仅支持简单表达式，无法直接在lwc:if中编写item.value === 'apple' || item.value === 'banana'这类复合条件，推荐以下两种落地方案：

方案1：给数组项添加计算属性 #

在JS初始化或数据更新时，给variable数组的每个元素添加一个布尔属性（比如isFruit），直接在HTML中引用该属性：

// 在connectedCallback或数据更新逻辑中处理
this.variable = this.variable.map(item => ({
    ...item,
    isFruit: item.value === 'apple' || item.value === 'banana'
}));

HTML中直接使用：

<div lwc:if={item.isFruit} key={item.id} >

方案2：使用getter返回处理后的数组 #

如果variable是通过getter获取的，可在getter中直接嵌入判断逻辑：

get processedVariable() {
    return this.variable.map(item => ({
        ...item,
        isFruit: item.value === 'apple' || item.value === 'banana'
    }));
}

HTML中遍历处理后的数组：

<template for:each={processedVariable} for:item="item">

结合recordId和objectName的建议 #

• 若判断逻辑需根据对象类型（objectName）调整，比如不同对象的有效值范围不同，可在初始化时分支处理：

  const validFruits = this.objectName === 'Product__c' 
    ? ['apple', 'banana', 'orange'] 
    : ['apple', 'banana'];
  this.variable = this.variable.map(item => ({
      ...item,
      isFruit: validFruits.includes(item.value)
  }));
  

• 若需结合当前记录（recordId）的其他字段值调整判断，可在connectedCallback中调用getRecordAPI获取记录数据，再根据返回字段更新item的判断属性。

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