ReactJS

Question

上で複数の動的コンポーネントの保存状態こんにちは、私は、このコンポーネントの構造を持っている：

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

私ScheduleAppはScheduleFormと呼ばれるフォームが含まれており、このフォームの下で、私は、ユーザーがチームの数を指定することができるフィールドを持っていると依存番号にTeamFieldの番号が作成されます。

私のフォームは、次のようになります。

そして、私が望んでいたことは、私のScheduleAppコンポーネントの下にすべてのチームの名前を保存することです。他のすべての状態を問題なく保存することができます。例：No. of Teamsフィールドに問題はありませんが、配列内にTeam Nameフィールドを保存する方法については固まっています。

ここではアレイを保存しようとする試みが貧弱ですが、おそらく私がonChangeというイベントを発生させたために私が作ったすべてのキーストロークが保存されているようです。

は、どのように私はこの問題を解決し、ちょうど親コンポーネントの状態の動的コンポーネントを保存すると仮定していますか？

ここで私のコードはjsfiddleですが何らかの理由で私はサイト上で動作させることはできませんが、アクセスを容易にするためにそこに投稿します。

希望しました。どんな助けでも大歓迎です！

Answer 1

変更/キーストロークごとに、テキストボックスの現在の内容を配列にプッシュしています。代わりに、テキストボックス1は配列内の最初のインデックスのみを変更する必要があります。また、テキストボックス2は、配列内の2番目のフィールドのみを変更する必要があります。それぞれの変更について、コンテンツ全体を新しいコンテンツに置き換えます。

よりクリーンなアプローチは、チームオブジェクトを格納することです。また、チーム名を保存できるオン・チェンジ・ハンドラでチーム番号フィールドも送信します。

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