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

Question

我正在创建一个搜索表单，该表单根据来自 select 框的用户 selection 具有不同数量的输入元素。

我将其分为三个组件，一个名为 SearchContainer 的包装器，一个名为 SearchSelect 的 select 框，以及名为 SearchWithTwo 和 SearchWithOne 只是为了举例。

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

当用户更改 select 框的值时，将加载包含输入的相关组件。该组件可以有 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.
}

然而，这并不是执行此操作的正确方法。是否有更好的推荐方法来遍历子组件并读取它们的状态？或者我能否以某种方式将子级传递给父级并以这种方式获取值？

Answer 1

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

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

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

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

这很简单，必须有一种方法可以用这种方法创建一个基础 class 或 mixin class，然后 inherit/compose 用其他 class 覆盖它es。我只是不确定如何。现在，您可以将这些行复制粘贴到任何对公开组件状态有意义的地方。

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

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

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

javascript

reactjs