在ReactJS上保存多个动态组件的状态

Question

嗨，我有这个组件结构：

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

我的ScheduleApp包含一个名为ScheduleForm的表单，在此表单下我有一个字段，用户可以指定多个团队，并且取决于创建TeamField的数量。

我的表单如下：

我想要的是将所有团队的名字保存在我的ScheduleApp组件下。我可以毫无问题地保存所有其他状态，例如：No. of Teams字段没有问题，但我仍然坚持如何在数组中保存Team Name字段。

这是我对保存数组的不良尝试，但看起来它保存了我所做的所有击键，可能是因为我触发了它onChange事件。

我怎么想解决这个问题，只是将动态组件保存在父组件的状态？

现在我的jsfiddle上的代码出于某些原因我无法在网站上运行，但会将其发布在那里以便于访问。

希望我说清楚。任何帮助将不胜感激！

Answer 1

您正在每次更改/按键时将文本框的当前内容推送到数组中。相反，你应该做的是文本框1应该只修改数组中的第一个索引。并且文本框2应该只修改数组中的第二个字段，依此类推。在每次更改时，使用新内容替换整个内容。

或者更简洁的方法是存储团队对象。并在on change change处理器中发送一个团队编号字段，您可以根据该字段存储团队名称。

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