如何从父组件中动态添加子组件值时访问子组件值？

Current Working Example如何从父组件中动态添加子组件值时访问子组件值？

我创建具有不同数量的基础上，从一个选择框的用户选择输入元素的搜索形式。

我要打破这种分为三个组成部分，一个叫SearchContainer包装，一个叫SearchSelect选择框，以及组件中的输入称为SearchWithTwo和SearchWithOne只是为了举例起见。

App └─SearchContainer Form │ SearchSelect │ ... any one of the multiple search inputs (SearchWithOne, SearchWithTwo)

当用户改变选择框被装载其中包含输入的相关分量的值。该组件可以有1到10个输入。我见过的所有例子都使用ref提到，如果我的输入没有改变，那将会很棒。

目前，我有它的工作通过使用onSubmit处理以下为SearchContainer

handleSubmit: function(e) { 
    e.preventDefault(); 
    var form = this.getDOMNode(); 

    [].forEach.call(form.elements, function(e){ 
     // get the values 
    }); 

    // submit the values to get results. 
}

然而，这并不觉得自己是正确的方式来这样做。是否有更好的推荐方法来遍历子组件并阅读它们的状态？或者我可以以某种方式让孩子进入父母状态并获得这些价值观？

来源

2015-02-23 Loktar

在我看来，输入数据可以存储在数组中，因为它改变（根据需要在输入上使用onchange或onkeydown事件）。然后，您不需要遍历DOM元素来处理提交。 – 2015-02-23 21:03:46

@AustinMullins嗯我不确定你的意思我猜。例如，用户可能从一个输入开始，然后将其更改为5（用于其他搜索），然后将其更改回来。您是否建议仅将数组数据保留在搜索容器中并从儿童组件更改事件修改它？ – Loktar 2015-02-23 21:08:00

是的。基本上，@ carb0nshel1和我所说的是，你的数据应该被包含一个数组/列表搜索条件的模型封装，并且可能还有多少条目实际上处于活动状态。 – 2015-02-23 21:10:37

我想我有一个解决方案，形式为fork of your fiddle，我将介绍下面的主要思想。

首先，我不是React专家，但我喜欢它的想法，而且我知道它越来越受欢迎，所以我想了解更多信息。我不知道的是使用composition or inheritance减少下面显示的代码重复的正确方法。

基本上，我的想法是为每个search类添加一个方法，将其state公开给调用类。这也是在这里实现为createClass里面调用一个很简单的功能：

getData: function() { 
    return this.state; 
},

它是如此简单，必须有创建一个基类或混合类用此方法，然后继承/组合在它与方式其他类。我只是不知道如何。现在，只要将这些行复制粘贴到任何有意义的位置，就可以公开组件的状态。

请记住，这是每个人都喜欢的Flux体系结构。在Flux中，状态总是来自React组件外部的源对象。

无论如何，现在放弃更大的架构问题，您可以通过在handleSubmit方法中调用getData来获取变量state。没有DOM遍历要求：

handleSubmit: function(e) { 
    e.preventDefault(); 
    var form = this.getDOMNode(), 
     fd = new FormData(form); 

    var submitData = this.state.SearchBox.getData(); 

    // submit the values to get results. 
},

来源

2015-02-23 21:34:18

是的，我目前使用助焊剂（回流实施）。我从评论中提出了你的想法，并开始实施它，但我做的有点不同。基本上我现在已经在输入组件中提交了，并且我让事件通过状态传递给父项。所以我在我的输入组件中提交了处理程序，并且在接收状态数据的父代中提交了一个处理程序。非常感谢您的回答！ – Loktar 2015-02-23 21:42:19

好吧，很高兴我帮了我的忙。这听起来像你一直在正确的轨道上，但是。 – 2015-02-23 21:58:41

如何从父组件中动态添加子组件值时访问子组件值？

回答

相关问题