动态添加子组件值时，如何从父组件访问这些值

How can I access child components values from a parent component when they are added dynamically?

本文关键字：组件 访问 添加 动态      更新时间：2024-04-18

当前工作示例

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

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

App └─SearchContainer Form │ SearchSelect │ ... any one of the multiple search inputs (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.
}

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

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

首先，我不是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.
},
相关文章：