單擊添加按鈕時顯示 React 組件

Question

我創建了一個 React 組件，當單擊“New Section”按鈕時，該組件將顯示出來。 我現在遇到的問題是我希望它是例如，如果按鈕被單擊三次，將顯示三個部分。 但是現在，當我單擊“新建部分”按鈕時，會出現一個新部分並且它在正確的位置，但我無法再次單擊它並顯示更多部分。

Answer 1

你很親近！

理論上，您可以擁有無限數量的部分，因此 boolean（真/假）不會因為顯示更多部分而剪掉它。 您需要做的是將其切換到 integer（1、2、3 等）

所以一開始，你只有一個部分（我假設）所以你的 state 應該是this.state = {sections: 1}

將您的按鈕更改為setState({sections: this.state.sections+1})因此當單擊新按鈕時，它將添加到您的sections 變量中。

現在為了讓您的部分正確顯示，您需要刪除硬編碼的<Section />並將其替換為 for 循環。

for (var i=0; i < this.state.sections; i++) {
  <Section />
} 

如果這樣做對您來說就是這樣，但如果您想更進一步並將每個部分的值存儲在sections 變量中，則必須將sections 用作數組。

this.state = {sections: [{your_attributes_here: your_values_here}]}

因此，無論何時單擊該按鈕，它現在都必須向陣列推送一個新的部分 object。 這可以簡單地實現為

let sections = this.state.sections.push({section_info_here});
this.setState({sections: this.state.sections.push({section_info_here})});

並為這些部分生成 html 現在將是

{this.state.sections.map((section, i) => {
  return <Section sectionData={section}/>
})}

僅當您需要為每個單獨的部分存儲數據時，才使用此方法。 任何一種方法都可以讓您克服無法添加超過 1 個部分的問題。 希望這可以幫助！