将组件添加到 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>

I am trying to keep adding under the existing on the button click. Every time the button clicks, a new field needs to be created under it.

It cannot use the DOM.render as I get an error telling me to edit the status rather than use DOM.

I tried:

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

Thanks for providing your code. You've almost done it (except some syntaxes errors).

First, initialize state.fields with []

this.state = {
    fields: []
}

Remove extra-parenthesis line 46 after onclick={this.handleClick}

Choose between handleclick or handleClick . Your code got the both.

Then, in your handleClick method, to push a element at the end of an array, do :

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

Hope this helps, good luck.