时间戳

首页 > 解决方案 > 创建新记录后重置 Lightning-record-form

javascript - 创建新记录后重置 Lightning-record-form

问题描述

我是 LWC 的新手。我想知道保存记录后如何重置闪电记录表格。

文件：contactCreator.html

    <template>
    <lightning-card title="Contact Creator">    
      <div class="slds-m-around_medium">
        <lightning-record-form object-api-name={objectApiName} fields={fields} oncancel={handleReset} onsuccess={handleSuccess}>
        </lightning-record-form>
      </div>
    </lightning-card> 
  </template>

文件：contactCreator.js

import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL from '@salesforce/schema/Contact.Email';

export default class ContactCreator extends LightningElement {

  objectApiName = CONTACT_OBJECT;
  fields = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL];

  handleSuccess(event){
    const toastEvent = new ShowToastEvent({
      title:"Contact Created - Success",
      message : "Record ID: "+ event.detail.id,
      variant:"success"
    });
    this.dispatchEvent(toastEvent);
  }
}

保存后我想要这样的组件

忽略图像中的新按钮

保存后我想要这样的组件

我保存后得到这个。

保存后的组件

标签： javascriptsalesforcesalesforce-lightninglwc

解决方案

在记录创建中，成功设置属性recordId以引用新对象，这就是您看到数据的原因。
为了获得新的空白表格，您必须覆盖该值。
只需在方法末尾添加这两行handleSuccess：

const editForm = this.template.querySelector('lightning-record-form');
editForm.recordId = null;

它应该如下所示：

handleSuccess(event) {
    const toastEvent = new ShowToastEvent({
        title: "Contact created",
        message: "Record ID: " + event.detail.id,
        variant: "success"
    });
    this.dispatchEvent(toastEvent);
    const editForm = this.template.querySelector('lightning-record-form');
    editForm.recordId = null;
}

推荐阅读