Javascript 将组件添加到React.js 从“./field.js”导入字段 classFieldSection扩展组件{ render（）{ 报税表（ 领域 添加 ) } } --Field.js-- 试验

我试图在现有的按钮下继续添加。每次单击按钮时，都需要在其下创建一个新字段

它无法使用DOM.render，因为我收到一个错误，告诉我编辑状态而不是使用DOM

我试过：

 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>

/*类字段节扩展组件{
25建造师（）{
26超级（）；
27本州={
28个字段：[]
29     }
30 this.handleClick=this.handleClick.bind（this）；
31   }
32
33 handleclick（）{
34 var数组=字段；
35此设置状态（prevState=>{
36返回{
37
38       }
39     }
40   }
41渲染（）{
42返回(
43
44{this.state.fields.map（field=>）}
45
46添加字段
48删除字段
49
50
51     )
52   }
53 }*/

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

首先，使用

[]

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

删除

onclick={this.handleClick}

在

handleclick

或

handleclick

之间进行选择。您的代码同时获得了这两个选项

然后，在

handleClick

方法中，要将元素推到数组的末尾，请执行以下操作：

this.state = {
    fields: []
}

希望这有帮助，祝你好运

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