Question

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

我已将其分为三个组件，一个名为SearchContainer的包装器，一个名为SearchSelect的选择框，以及名为SearchWithTwo和SearchWithOne的组件内的输入为了这个例子。

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

当用户更改选择框的值时，将加载包含输入的相关组件。该组件可以有一到十个输入。我见过的所有例子都提到了使用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.
}

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

Answer 1

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

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

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

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

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

请记住，这是每个人都喜欢的Flux建筑的诅咒。在Flux中，state总是来自一个源于React组件之外的源对象。

无论如何，暂时放弃更大的架构问题，您只需在state方法中调用getData即可获取handleSubmit变量。不需要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.
},

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

1 个答案: