如何從 html 獲取輸入值數組到 JS

Question

我在 salesforce.stackexchange.com 上發布了同樣的問題，下面是鏈接

https://salesforce.stackexchange.com/questions/283596/how-to-fetch-input-field-value-in-js-in-lwc?noredirect=1#comment426016_283596

但是在評論中人們認為這與 salesforce 關系不大，它更像是 Javascript 的事情，所以我在這里發布相同的內容，請從 ZFC35FDC70D5FC69D269883A822C7A53E 的角度看一下並提出建議。

HTML syntax seem different as it is lightning web component of salesoforce not angular, and also please help me to understand the same behavior in angular and I will do it in salesforce accordingly

在下面的 html 代碼中，我正在迭代 2 個列表 linItemData（11 條記錄）和 studyData（20 條記錄）

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
          <thead>
            <tr class="slds-line-height_reset">
              <template if:true={studyData}>
                <template for:each={studyData} for:item="sData">
                  <th key={sData}>
                    <div class="tablename slds-p-bottom_medium"></div>{sData.Visit_Name__c}
                  </th>
                </template>
              </template>
            </tr>
          </thead>
          <tbody>
            <template if:true={lineItemData}>
              <template for:each={lineItemData} for:item="sLineItem">
                <tr key={sLineItem}>
                  <template for:each={studyData} for:item="sData">
                    <td key={sData.Id}>
                      <lightning-input variant="label-hidden" class="fieldSize" type="number" step="0.01"
                        label="visitValue" data-key={sData.Id} onchange={visitValueChange} placeholder="00.00">
                      </lightning-input>
                    </td>
                  </template>
                </tr>
              </template>
            </template>
          </tbody>
        </table>

我得到了一個預期的結果，其中包含 UI 上所有必需的輸入字段，如下所示：

現在我需要獲取所有 v20 的輸入值，例如 v1（第一列名稱）應該有 11 個輸入記錄的數組。

JS如下：

visitValueChange(event) {
    this.studyData
        .find(item => item.Id === event.currentTarget.dataset.key)
        .visitValue = event.target.value;
}

我已經盡我所能，但 visitValue 只能保存 1 個最近的值，例如，如果我在第一個輸入字段添加 1，在第二個輸入字段添加兩個，在第三個添加三個等等，然后我點擊一個調用 JS function 的按鈕查看 studyData 數組，但它只有最近的值，即 3 不是所有輸入的 1,2 和 3 值，並且要求在所有列的所有 11 個輸入字段上添加一個包含所有輸入值的數組。 請幫助我提出任何解決方法。

Answer 1

你有兩個問題：

• 數據的設計方式
• 將輸入與正確的記錄相關聯

數據 model

根據您的上下文，您可以這樣說：

• 每行是一個記錄，列是記錄的屬性（col1，col2，...）
• 每列是一條記錄，行是記錄的屬性（row1，row2，...）
• 每個單元格都是一個記錄，其 id 為x_y (1_1, 1_2, ...)

我可能會推薦選項 1，因為它是最常見的表示。

這意味着您必須准備/創建這樣的記錄：

const myRecords = [
    { 
        id: 1,
        col1: 0,
        col2: 0,
        ...
    }, {
        id: 2,
        col1: 0,
        col2: 0,
        ...
    }
]

將輸入鏈接到正確的記錄

使用LWC 數據表來創建您的表。 然后，您可以使用自定義數據類型獲得所需的內容。 這將允許使用正確設計的記錄（一行一行，每列是一個屬性）而無需任何轉換。

使用提供的 HTML 顯示

不幸的是，Salesforce （使用您提供的 HTML）存在一些限制，因此您需要將記錄轉換為此。

const myRecords = [
    { 
        id: 1,
        columns: [
            { id: 1, value: 0 },
            { id: 2, value: 0 }
            ...
        ]
    }, {
        id: 2,
        columns: [
            { id: 1, value: 0 },
            { id: 2, value: 0 }
            ...
        ]
    }
]

這將允許它工作

 import { LightningElement, track } from 'lwc'; export default class App extends LightningElement { columns = [{ id: '1', name: 'v1' }, { id: '2', name: 'v2' }, { id: '3', name: 'v3' }, { id: '4', name: 'v4' }, { id: '5', name: 'v5' }, ] records = [{ id: '1', columns: [{ id: '1', value: 0 }, { id: '2', value: 0 }, { id: '3', value: 0 }, { id: '4', value: 0 }, { id: '5', value: 0 }, ] }, { id: '2', columns: [{ id: '1', value: 0 }, { id: '2', value: 0 }, { id: '3', value: 0 }, { id: '4', value: 0 }, { id: '5', value: 0 }, ] } ] visitValueChange(event) { const recordId = event.target.dataset.recordId const columnId = event.target.dataset.columnId const value = event.target.value const record = this.records.find(record => record.id === recordId) const column = record.columns.find(column => column.id === columnId) column.value = value } }

 <template> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> <thead> <tr class="slds-line-height_reset"> <template for:each={columns} for:item="column"> <th key={column.id}>{column.name}</th> </template> </tr> </thead> <tbody> <template for:each={records} for:item="record"> <tr key={record.id}> <template for:each={record.columns} for:item="column"> <td key={column.id}> <lightning-input variant="label-hidden" class="fieldSize" type="number" step="0.01" label="visitValue" value={column.value} data-record-id={record.id} data-column-id={column.id} onchange={visitValueChange} placeholder="00.00" ></lightning-input> </td> </template> </tr> </template> </tbody> </table> </template>