将组件添加到 React.js答案

【问题标题】：Adding component to React.js将组件添加到 React.js
【发布时间】：2019-02-22 20:58:38
【问题描述】：

 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 }*/

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

感谢您提供代码。您几乎完成了（除了一些语法错误）。

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

this.state = {
    fields: []
}

删除onclick={this.handleClick}之后的第46行外括号

在handleclick 或handleClick 之间进行选择。你的代码两者兼得。

然后，在您的 handleClick 方法中，将一个元素压入数组末尾，请执行以下操作：

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

希望这会有所帮助，祝你好运。

【讨论】：