如何将值从子数组传递给父数组

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 。