Я новичок в веб-компоненте молнии. Я пытался создать таблицу, в которой я вводил новые записи. Я пока помещаю одно поле, для простоты.

<template for:each={allrecords} for:item='record' for:index="index">
                <tr key={item}>
                    <th scope="row" data-label="Remove">
                        <div class="slds-truncate" title="Remove" id={item} data-item={item} onclick={handleRemoveClick}>
                            <lightning-button-icon
                                icon-name="action:remove"
                                variant="border-filled"
                                data-item={item}
                                alternative-text="Remove">
                            </lightning-button-icon>
                            {index}
                        </div>
                    </th>
                    <td data-label="Account Name">
                        <div class="slds-truncate" title="Serial Number">
                            <lightning-input type="text" style="width:200px;" value={record.Serial_Number__c} onfocusout={serialNumberOut} required></lightning-input>
                        </div>
                    </td>
                </tr>
            </template>
<lightning-button label="Add New Row" variant="brand" onclick={addNewRow}></lightning-button>
<lightning-button label="Submit" variant="brand" onclick={submit}></lightning-button>

import { LightningElement, track } from 'lwc';
export default class PackageReportingForDealers extends LightningElement {
    @track allrecords = [];

    addNewRow(event){
        debugger;
        console.log(event);
        let newRow = {Serial_Number__c : ""};
        this.allrecords.push(newRow);
    }
    handleRemoveClick(event){
        alert('@@'+event.target.dataset.item);

    }
    serialNumberOut(event){
        console.log(event);
    }
    submit(event) {
       console.log(event);
    }

}

Вот у меня несколько вопросов..

  1. Почему я не могу использовать key={index} в первом файле . Если эти записи новые, я не могу использовать идентификатор. Поэтому я думал об использовании Index. И исходя из этого, я тоже удалю. что было бы лучшим подходом для этого?

  2. Как я могу проверить и остановить отправку, если поля пусты. Может быть много строк, и мне нужно выполнить проверку и показать ошибку для всех записей. Как я могу это сделать. Любой образец кода или ресурс для этого?

  3. handleRemoveClick --> здесь я получаю event.currentTarget и event.target как пустой. Я использовал event.currentTarget.id, но в этом случае он пуст.

0
Martin Lezer 26 Июл 2019 в 12:36

1 ответ

Лучший ответ

Почему я не могу использовать key={index} в первом файле . Если эти записи новые, я не могу использовать идентификатор. Поэтому я думал об использовании Index. И исходя из этого, я тоже удалю. что было бы лучшим подходом для этого?

Согласно документации IMPORTANT Every item in a list must have a key. When a list changes, the framework uses the key to identify each item so that it can rerender only the item that changed. The key must be a string or a number, it can't be an object. You can’t use index as a value for key. Assign unique keys to an incoming data set. To add new items to a data set, use a private property to track and generate keys. Используйте Id записи. Когда записей нет, он даже не зайдет внутрь итерации - так что не проблема

Как я могу проверить и остановить отправку, если поля пусты. Может быть много строк, и мне нужно выполнить проверку и показать ошибку для всех записей. Как я могу это сделать. Любой образец кода или ресурс для этого?

Вы можете использовать this.template.querySelector('lightning-input').checkValidity(). Это будет возвращено, если оно действительно или нет, в зависимости от того, определили ли вы его как required, min, max и т. д. Для идентификации всех входных данных используйте querySelectorAll и forEach . См. https://salesforcesas.home.blog/ 16.07.2019/lwc-селекторы-идентификация-элементов/

handleRemoveClick --> здесь я получаю event.currentTarget и event.target как пустые. Я использовал event.currentTarget.id, но в этом случае он пуст.

Что такое item в data-item={item}. Вы используете for:item='record', поэтому это должно быть что-то вроде record.Name, record.Id, record.myfields__c и т. д.

2
salesforce-sas 26 Июл 2019 в 12:50
Большое спасибо @salesforcesas. Я смог проверить входные данные. Но не могли бы вы рассказать мне, как мне привязать allrecords[] к моим входам? Я знаю, что для одного входа я могу добавить событие onchange и обновить атрибут, выполнив event.target.value. Но я могу сделать со списком входов? как я могу связать свои все записи [] с входными данными. Пожалуйста, помогите мне с этим.
 – 
Manohar
27 Июл 2019 в 16:42