如何將值從子數組傳遞給父數組

Question

我的要求如下

在父組件中，我傳遞了一個子組件數組（數組可以是 1 或大於 1）

如圖所示，子組件由諸如 input[type=range]、input[type=number]、下拉菜單等元素組成

父組件有一個按鈕

<button>Search Location</button>

當我點擊 Parent 中的 Search 按鈕時，我需要每個子組件中每個元素的值，例如。 結構可以如下

let finalObj={
    child1: {
        dropValue: "Room1",
        cond: "AND"
    },
   child2: {
        inputVal: 50,
        cond: "OR"
   },
   child[n]: {
        rangeVal: 1,
        cond: ""
   }
}

此外，我們可以再次更改該值（單擊搜索之前），並且搜索按鈕應始終拾取每個組件的當前設置值。

我不知道如何繼續這個。 任何指針都會非常有幫助。 請幫忙

Answer 1

因此，您需要將一組組件更改為...的對象。首先，這是一個.reduce使用。

const almostFinalObj = components.reduce((retval, each, i) => {
   retval['child'+i] = each;
   return retval;
}, {});

這將給出一個像

almostFinalObj = {
   child1: component1,
   child2: component2,
   childN: componentN,
}

現在我們可以.forEach通過它，將每個子組件轉換為您正在尋找的任何格式。 （我不清楚那部分，但也許你可以弄清楚其余部分。）

Object.keys(almostFinalObj).forEach((each, i, array) => {
  let component = array[i];
  array[i] = {};
  component.querySelectorAll('input').forEach(e => {
    array[i][e.name] = e.value;
  });
});

這假設name屬性存在於每個子行組件中的每個元素上。 （例如，您示例中的每個單選按鈕都有<input type='radio' name='cond' .... /> 。）您可以使用id甚至data-XXX屬性代替e.name 。