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

Question

I am creating a search form that has a varying number of input elements based on the users selection from a select box.

I have broken this up into three components, a wrapper called SearchContainer, a select box called SearchSelect, and the inputs within components called SearchWithTwo and SearchWithOne just for the sake of the example.

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

When a user changes the value of the select box the related component which contains the inputs is loaded. The component could have anywhere from one to ten inputs. All the examples I've seen mention using ref which would be great if my inputs weren't changing.

I currently have it working by using the following in the onSubmit handler for 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.
}

However this doesn't feel like the proper way to be doing this. Is there a better recommended way to iterate through the children components and read their state? Or can I somehow pass the children into the parent state and get the values that way?

It seems to me that the input data could be stored in an array as it changes (either using `onchange` or `onkeydown` event on the inputs as desired). Then you don't need to iterate over DOM elements to handle submission. — Austin Mullins, Feb 23 '15 at 21:03
@AustinMullins hmm I'm not sure what you mean I guess. The user might start out with one input for example, then change it to 5 (for a different search) then change it back. Are you suggesting just keeping the array of data within the search container and modifying it from the children components change events? — Loktar, Feb 23 '15 at 21:08
Yes. Basically, what @carb0nshel1 and I are saying is that your data should be encapsulated by a model which includes an array/list of search terms and probably also a count of how many terms are actually active. — Austin Mullins, Feb 23 '15 at 21:10
I'm revising my stance after looking at your fiddle. I should have noticed the `reactjs` tag earlier. I think the right answer will involve creating a method on your different `search` classes to handle submission, and then letting your main `handleSubmit` function call that method. That seems like the React way to do it, since each React class already contains a `state` model. — Austin Mullins, Feb 23 '15 at 21:18
@AustinMullins actually that sounds like a pretty good solution! Thanks! haha you should add it as an answer. — Loktar, Feb 23 '15 at 21:20

score 3 · Accepted Answer · edited May 23 '17 at 11:54

I think I have a solution in the form of a fork of your fiddle, and I'll cover the main ideas below.

First, I'm no React expert, but I like the idea of it, and I know it's gaining popularity so I want to learn more. What I don't know is the right way to use composition or inheritance to reduce the code duplication shown below.

Basically, my idea is to add a method to each search class that exposes its state to calling classes. This is implemented here as a very simple function inside the createClass call:

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

It's so simple, there has to be a way to create a base class or mixin class with this method and then inherit/compose over it with other classes. I'm just not sure how. For now, you can just copy-paste these lines wherever it makes sense to expose a component's state.

Keep in mind, this is anathema to the Flux architecture everyone loves. In Flux, state always comes from a source object which lives outside the React components.

Anyway, abandoning larger architecture concerns for now, you can just grab that state variable by calling getData in the handleSubmit method. No DOM traversal required:

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.
},

Yeah I am currently using flux (reflux implementation). I took your idea from the comment and started implementing it, but I do it a bit differently. Basically I have the submit within the input components now, and I let the event bubble up passing the state to the parent. So I have submitHandlers within my input components, and one in the parent that receives the state data. Thanks a lot for the answer! — Loktar, Feb 23 '15 at 21:42
Well, glad I helped if I did. It sounds like you were on the right track the whole time, though. — Austin Mullins, Feb 23 '15 at 21:58

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

1 Answers1