ネストされたフォームの値に反応する

Question

ReactJSでネストされたフォーム要素の値を取得するにはどうすればよいですか？

例

レッツは、私は、次の要素でフォームを持っていると言う：

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

私はこれらのフィールドの値を取得したいのonSubmit。 最も簡単な方法は、最も直感的にはを通じて次のようになります。

this.refs 

しかし、それはすべての引用文献を平らにし、配列要素の最後を返します。だから、のようなものを返します：

{ name: '', 
    email:['', ''], 
    books: [ 
    { title: '', author: '' }, 
    { title: '', author: '' } 
    ] 
} 

または類似のもの：

{ name: '', email[]: '', title: '', author: '' } 

を私は何を取得したいことは、次のようになります。

おそらく、refsを使用するのが最良の選択肢ではないかもしれませんが、他の選択肢についてはわかりません。

EDIT 実行：私が達成したいものに

e.target.childNodes 

戻り似たようなもののので、それらのうちの値を得ることが仕事のかなり多くがあり、それはプレーンなHTMLノードを返します（ためのいくつかのカスタムメソッドを書きます処理ノードツリー）。

Answer 1

inputは、IDのいくつかの種類やkeyを持っているだろう場合は、おそらく行うことができます：

<input key="[YOUR_KEY]" type="text" onChange={ (e) => { this.setState({ 
    [YOUR_KEY]: e.currentTarget.value 
}); } } /> 

そして、あなたは状態から直接、すべての値を参照することができます。

キーでも増分番号として任意でよい：

<input key="email_1" type="text" onChange={ (e) => { this.setState({ email_1: e.currentTarget.value }); } } /> 
<input key="email_2" type="text" onChange={ (e) => { this.setState({ email_2: e.currentTarget.value }); } } /> 
<input key="email_3" type="text" onChange={ (e) => { this.setState({ email_3: e.currentTarget.value }); } } /> 
<input key="email_4" type="text" onChange={ (e) => { this.setState({ email_4: e.currentTarget.value }); } } /> 

その後、あなたはthis.state.email_2で、たとえば第二電子メールのフィールドを参照することができます。