Geschachtelte Formularwerte reagieren

Question

Wie kann ich in ReactJS verschachtelte Formularelementwerte abrufen?

Beispiel

Let sagen, dass ich ein Formular mit folgenden Elementen haben:

<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> 

Ich möchte onsubmit Werte dieser Felder erhalten. Der einfachste Weg, und intuitivste wäre durch:

this.refs 

Aber es wird alle Refs abflachen und erst im letzten der Array-Elemente zurück. So wird es zurückgeben etwas wie:

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

Was ich bekommen sollte wie folgt aussehen:

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

oder etwas ähnliches.

Vielleicht ist die Verwendung von Refs nicht die beste Option, aber ich bin mir nicht sicher über andere Alternativen.

EDIT Executing:

e.target.childNodes 

Returns etwas Ähnliches, was ich will erreichen, aber es gibt einfache HTML-Knoten so Werte immer aus ihnen ist ziemlich viel Arbeit (Schreiben einige benutzerdefinierte Methode für Verarbeitungsknotenbaum).

Answer 1

Wenn die input eine Art von ID haben würde oder ein key, könnten Sie wahrscheinlich tun:

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

Und dann könnte man alle Werte vom Staat direkt verweisen.

Der Schlüssel kann auch als inkrementelle Anzahl beliebig sein:

<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 }); } } /> 

Dann können Sie das zweite E-Mail-Feld zum Beispiel mit this.state.email_2 verweisen.