如何动态添加父组件时，如何访问父组件的子组件值？

Question

当前的工作实例

我正在根据选择框中的用户选择创建一个具有不同数量的输入元素的搜索表单。

我将其分解为三个组件，一个名为SearchContainer的包装器，一个名为SearchSelect的选择框，以及名为SearchWithTwo和SearchWithOne组件内的输入，仅用于示例。

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

当用户更改选择框的值时，将加载包含输入的相关组件。 该组件可以有一到十个输入。 我见过的所有例子都提到了使用ref ，如果我的输入没有改变，这将是很好的。

我目前在SearchContainer的onSubmit处理程序中使用以下工作

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

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

    // submit the values to get results.
}

然而，这并不像是这样做的正确方法。 是否有更好的推荐方法来迭代子组件并读取它们的状态？ 或者我可以以某种方式将孩子们传递到父状态并以这种方式获取值？

Answer 1

我想我有一个小提琴叉子形式的解决方案，我将介绍下面的主要想法。

首先，我不是React专家，但我喜欢它的想法，我知道它越来越受欢迎，所以我想了解更多。 我不知道的是使用组合或继承来减少下面显示的代码重复的正确方法。

基本上，我的想法是为每个search类添加一个方法，将其state公开给调用类。 这是在createClass调用中实现的一个非常简单的函数：

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

它很简单，必须有一种方法可以使用此方法创建基类或mixin类，然后使用其他类继承/组合它。 我只是不确定如何。 现在，您只需将这些行复制粘贴到有意义的位置即可暴露组件的状态。

请记住，这是每个人都喜欢的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.
},