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

Question

我的要求如下

在父组件中，我正在传递一个子组件数组（该数组可以是1或大于1）

如图所示，子组件由输入[type = range]，input [type = number]，下拉菜单等元素组成

父组件具有一个按钮

 @Before
    public void setup() {
        this.mvc = MockMvcBuilders.webAppContextSetup(webCtx).build();

        // start wiremock here
        authRule.start();
        changelogService.start();

        authRule.stubFor(post(urlEqualTo("/oauth/token"))
                .willReturn(aResponse()
                        .withStatus(200)
                        .withBody("{\"access_token\": \"ken sent me\", \"expires_in\": 200000}")));
    }

当我单击“父级”中的“搜索”按钮时，我需要每个子组件中每个元素的值， 例如结构可以如下所示

<button>Search Location</button>

此外，我们可以再次更改该值（在单击搜索之前），并且“搜索”按钮应始终拾取每个组件的当前设置值。

我不确定该如何进行。任何指针都将非常有帮助。请帮忙

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。