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

Question

嗨，我有这个组件结构：

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

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

我的表单如下所示：

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

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

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

现在这是我在 jsfiddle 上的代码，由于某些原因我无法在网站上运行但会 post 将它放在那里以便于访问。

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

Answer 1

您每隔 change/keystroke 就将文本框的当前内容推送到数组中。相反，您应该做的是文本框 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};
}

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

Save state of multiple Dynamic Components on ReactJS

javascript

components

jsx

reactjs