將組件添加到 React.js

Question

 import field from './Field.js' 

classFieldSection extends Component{ 
    render() { 
      return ( 
       <div id="fieldSection"> 
         <div id="fieldContent"> 
           <label> Fields </label> 
           <Field />
        </div> 
       </div> 
      <div> 
         <button> Add </button> 
      </div> 
     ) 
   }
}

--Field.js--
<div>
  <label>Test</label>
  <input type="text" />
</div>

我試圖在現有的按鈕點擊下繼續添加。 每次單擊按鈕時，都需要在其下創建一個新字段。

它不能使用 DOM.render，因為我收到一個錯誤，告訴我編輯狀態而不是使用 DOM。

我試過：

/*class FieldSection extends Component{
 25   constructor(){
 26     super();
 27     this.state = {
 28       fields: [<Field />]
 29     }
 30     this.handleClick = this.handleClick.bind(this);
 31   }
 32
 33   handleclick() {
 34     var array = fields;
 35     this.setState(prevState=> {
 36       return {
 37
 38       }
 39     }
 40   }
 41   render () {
 42     return (
 43       <div>
 44         {this.state.fields.map(field => <Field {...field}/>)}
 45           <div id="fieldButtons">
 46             <button id="addField" type="button" onclick={this.handleClick})
 47 > Add Field </button>
 48             <button id="removeField" type="button"> Remove Field </button>
 49           </div>
 50       </div>
 51     )
 52   }
 53 }*/

Answer 1

感謝您提供您的代碼。 你幾乎已經完成了（除了一些語法錯誤）。

首先，用[]初始化state.fields

this.state = {
    fields: []
}

在onclick={this.handleClick}之后刪除額外的括號行 46

在handleclick或handleClick之間handleclick選擇。 你的代碼得到了兩者。

然后，在您的handleClick方法中，要在數組末尾推送一個元素，請執行以下操作：

this.setState(prevState => ({
  fields: [...prevState.fields, newElement]
}))

希望這有幫助，祝你好運。