React nested form values
<p>How can I get nested form elements values in ReactJS?</p>

<p><strong>Example</strong></p>

<p>Let say I have a form with following elements:</p>

<pre><code>&lt;form onSubmit={handleSubmit(e)}&gt;
  &lt;input ref="name" type="text" /&gt;
  { /* possibly unlimited number of emails */ }
  &lt;input ref="email[]" type="text" /&gt;
  &lt;input ref="email[]" type="text" /&gt;
  { /* possibly unlimited number of book objects */ }
  &lt;fieldset&gt;
    &lt;input ref="title" type="text" /&gt;
    &lt;input ref="author" type="text" /&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
    &lt;input ref="title" type="text" /&gt;
    &lt;input ref="author" type="text" /&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p>I want to get values of these fields onSubmit.
The easiest way and most intuitive would be through:</p>

<pre><code>this.refs
</code></pre>

<p>But it will flatten all refs and return only last of the array elements. So it will return something like:</p>

<pre><code>{ name: '', email[]: '', title: '', author: '' }
</code></pre>

<p>What I want to get should look like this:</p>

<pre><code>{ name: '',
  email:['', ''],
  books: [
    { title: '', author: '' },
    { title: '', author: '' }
  ]
}
</code></pre>

<p>Or something similar.</p>

<p>Maybe using refs is not the best option, but I'm not sure about any other alternatives.</p>

<p><strong>EDIT</strong>
Executing:</p>

<pre><code>e.target.childNodes
</code></pre>

<p>Returns something similar to what I want to achieve but it returns plain HTML nodes so getting values out of them is quite a lot of work (writing some custom method for processing nodes tree).</p>