Current Working Example

我正在创建一个搜索表单,其中包含根据用户从选择框中进行的选择而变化的输入元素数量.

我将其分为三个组件,一个名为SearchContainer的包装器,一个名为SearchSelect的选择框,以及仅出于示例目的而在组件内部的SearchSearch和Two的输入.

应用程式
└─SearchContainer表格
   │搜寻选择
   │…多个搜索输入中的任何一个(SearchWithOne,SearchWithTwo)

当用户更改选择框的值时,将加载包含输入的相关组件.该组件可以有1到10个输入.我看过的所有示例都提到使用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.
}

但是,这并不适合执行此操作.有没有更好的推荐方法来遍历子组件并读取其状态？还是可以以某种方式将子级传递给父级状态并以这种方式获取值？

解决方法:

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

首先,我不是React专家,但是我喜欢它的想法,并且我知道它越来越受欢迎,所以我想学习更多.我不知道使用composition or inheritance来减少如下所示的代码重复的正确方法.

基本上,我的想法是向每个搜索类添加一个方法,以将其状态暴露给调用类.这是通过createClass调用中的一个非常简单的函数实现的：

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

非常简单,必须有一种方法可以使用此方法创建基类或mixin类,然后与其他类继承/组合.我只是不确定如何.现在,您仅可以在需要暴露组件状态的地方复制粘贴这些行.

请记住,这是每个人都喜欢的Flux架构的反面.在Flux中,状态始终来自存在于React组件外部的源对象.

无论如何,暂时放弃较大的体系结构问题,您只需在handleSubmit方法中调用getData即可获取该状态变量.不需要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.
},