1 개의 번개 기록 편집 양식을 제출하고 onsubmit 메소드 매개 변수를 실행하는 방법은 무엇입니까?
아래 코드를 사용하여 각 양식을 제출하면 onsubmit = {handleSubmit}이 실행되지 않습니다. 왜?
<lightning-record-edit-form key={item.id} object-api-name="professionalExperience__c" onsubmit={handleSubmit}>
this.template
.querySelectorAll("lightning-record-edit-form")
.forEach(element => {
alert('ELEMENTO: ' + JSON.stringify(element));
element.submit();
alert('post submit SUBMIT');
});
handleSubmit(event){
alert('hello');
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
alert(JSON.stringify(fields));
console.log(fields);
this.template.querySelector('lightning-record-edit-form').submit(fields);
}
답변
사용자 지정 사용 이벤트 핸들러를 제출 정의하는 경우 onsubmit={handleSubmit}내에서 lightning-record-edit-form, 당신은 필요 (의 버튼 요소를 정의하는 type='submit') 기록 편집 양식에서 . 그런 다음 LWC는이 제출 버튼을 사용자 지정 이벤트 처리기 코드에 연결합니다. 따라서 버튼을 클릭하면 제출 이벤트가 트리거 되고 사용자 지정 이벤트 처리기 코드가 실행됩니다. 이 이벤트 핸들러 코드 내에서 event.detail.fieldsparam은 런타임 중에 업데이트 할 수있는 모든 필드 값을 보유합니다.
반대로 여러 개의 lightning-record-edit-form, onclick이벤트 핸들러가 있는 단일 제출 / 저장 버튼 및 이벤트 핸들러에 다음 코드가있는 onsubmit={handleSubmit}경우이 핸들러와 연결된 특정 버튼이 없기 때문에 로 정의 된 사용자 정의 이벤트 핸들러 는 영향을 미치지 않습니다. 암호.
this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});
의 제출 이벤트를 트리거하지 않고 레코드 편집 양식 lightning-record-edit-form의 공용 메서드 submit를 직접 호출 하므로 위 코드를 실행해도 사용자 지정 이벤트 처리기 메서드가 호출되지 않습니다 .
에서 코드에 fields 속성이 표시되지 않으므로 구성 요소에서 lightning-record-edit-form사용 lightning-input-fields하고 있다고 가정합니다 . 문제에 대한 가능한 해결책은 코드에서 직접 입력 필드에 액세스하는 것입니다. 예를 들어, 번개 입력 필드가로 정의 된 경우 <lightning-input-field field-name="Name"></lightning-input-field>아래 샘플 코드에 표시된대로이 특정 필드에 액세스 할 수 있습니다.
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.name === "Name") {
// Do something here with the field
}
});
}
다른 번개 레코드 편집 양식에 동일한 필드가있는 경우 data- * 속성을 사용할 수 있습니다 . 예를 들어, 번개 입력 필드가로 정의 된 경우 <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>아래 샘플 코드에 표시된대로이 특정 필드에 액세스 할 수 있습니다.
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.dataset.id === "Name1") {
// Do something here with the field
}
});
}
또는의 onchange이벤트 핸들러를 사용 lightning-input-field하고 입력 필드의 값을 관리 할 수도 있습니다 .
레코드 데이터의 제출을 식별하고 제어하려는 경우 레코드 편집 양식 수준에서 데이터 속성을 사용할 수도 있습니다. 면책 조항 : 나는 당신에게 문제를 복제하고 내 끝 에서이 솔루션을 테스트하려고 시도하지 않았지만 작동합니다.