ReactJS-如何在单击按钮时添加更多文本，文本字段，选择字段？

Question

我想添加更多带有textfields选择字段的文本。 单击后如何添加？

下面是我的代码。 我想要一组新的打印方法，如下所示。

例如，一开始我有这组带有选择的数据
打印方法（selecfield）
位置：（文本字段）
高度：（文本字段）
宽度：（文本字段）
颜色：（文本字段）

点击后，我希望它像这样
打印方法（选择字段）
位置：
高度：（文本字段）
宽度：（文本字段）
颜色：（文本字段）
打印方法（选择字段）
位置：（文本字段）
高度：（文本字段）
宽度：（文本字段）
颜色：（文本字段）

并为每次点击增加更多

Answer 1

我建议做类似以下的事情（伪代码）。 请记住，这是超级简单且未经测试。 同样，使用这样的索引并不是最明智的选择，使用某种自然ID（或随机生成的ID）可能更明智，但这应该可以帮助您入门。 然后，Print组件会针对所找到的每个print ，简单地从问题中呈现您自己的代码（确保它使用正确的道具，并调用onAddPrint方法（ this.props.onAddPrint ）。

class PrintForm extends React.Component {
  constructor() {
    //Initialize with one, empty one
    this.state = {
      prints: [{posStyle: undefined}]
    }
  }
  onAddPrint(print) {
    let newPrints  = this.state.prints[print.index] = print;
    newPrints.push({posStyle: undefined});    
    this.setState({
      prints: newPrints,
    });
  }

  render() {
    return this.state.prints.map(function(print, index) {
      return(<Print onAddPrint={this.onAddPrint} id={print.id} posType={this.posType} index={index} {all other props}></Print>);
    });
  }
}>