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

Question

嗨，我有这个组件结构:

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

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

我的表单如下所示:

我想要的是将所有团队的名称保存在我的 ScheduleApp 组件下。我可以毫无问题地保存所有其他状态，例如:No. of Teams 字段没有问题，但我对如何将 Team Name 字段保存在数组中感到困惑。

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

我该如何解决这个问题并将动态组件保存在父组件的状态上？

现在这是我在 jsfiddle 上的代码由于某种原因，我无法让它在网站上运行，但会将其发布到那里以便于访问。

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

Answer 1

每次更改/击键时，您都会将文本框的当前内容推送到数组中。相反，您应该做的是文本框 1 应该只修改数组中的第一个索引。文本框 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};
}