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