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方法中，将元素推入数组的末尾，请执行以下操作：

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

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

向React.js添加组件

1 个答案: