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

Question

我是 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);
  }
}

保存后我想要这样的组件

忽略图像中的新按钮

我保存后得到这个。

Answer 1

在记录创建中，成功设置属性 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;
}

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

Reset Lightning-record-form after creating new record

javascript

salesforce

salesforce-lightning

lwc