Speichern Zustand mehrerer Dynamische Komponenten auf ReactJS

Question

Hallo Ich habe diese Komponente Struktur:

<ScheduleApp /> 
    <ScheduleForm /> 
    <TeamField /> 

Meine ScheduleApp ein Formular ScheduleForm genannt enthält und unter dieser Form habe ich ein Feld, in dem Benutzer eine Reihe von Teams angeben und hängt Auf der Nummer wird die Nummer TeamField erstellt.

Meine Form sieht wie folgt aus:

Und was wollte ich alles die Namen der Teams speichern unter meiner ScheduleApp Komponente. Ich kann alle anderen Zustände ohne Problem speichern, Beispiel: das No. of Teams Feld ohne Problem, aber ich bin fest, wie man die Team Name Felder in einem Array speichert.

Hier ist mein armer Versuch, das Array zu speichern, aber es sieht so aus, als ob es alle Tastenanschläge speichert, die ich wahrscheinlich gemacht habe, weil ich es onChange Ereignis ausgelöst habe.

Wie bin ich nehme an, dieses Problem zu lösen und nur die dynamischen Komponenten auf den Zustand Mutter Komponenten sparen?

Jetzt sind hier meine Codes auf jsfiddle aus irgendeinem Grund kann ich es nicht auf der Website laufen lassen, aber wird es dort für einen leichteren Zugriff posten.

Ich hoffe, ich machte es klar. Jede Hilfe würde sehr geschätzt werden!

Answer 1

Sie drücken den aktuellen Inhalt des Textfelds bei jeder Änderung/jedem Tastendruck in das Array. Stattdessen sollten Sie in Textfeld 1 nur den ersten Index in Ihrem Array ändern. Und Textfeld 2 sollte nur das zweite Feld in Ihrem Array ändern und so weiter. Ersetzen Sie bei jeder Änderung den gesamten Inhalt durch neuen Inhalt.

Oder ein sauberer Ansatz wäre ein Team-Objekt zu speichern. Und senden Sie auch ein Teamnummernfeld im On-Change-Handler, gegen den Sie den Teamnamen speichern können.

<input className="form-control" type="text" ref="teamName" 
        onChange={this.handleChange.bind(null, 'team1')} /> // pass any index or string instead of team1 
... 
handleChange(teamIndex, teamName) { 
    let { teams } = this.state; 
    teams[teamIndex] = teamName; 
    this.setState({teams: teams}; 
}