React.js向子组件添加组件

Question

import FieldSect from "./fieldSect.js" 
<div>
  <FieldSect />
</div>

--FieldSect.js--

import Field from "./Field.js"
<div>
   <Field />
<button onclick={addField}> addField </field>
</div>

--Field.js--

function Field (){
    <div>
      <label> Test </label>
      <input type="text" />
    </div>

}

My code works in the part where Field is loaded immediately and is shown correctly. I am really struggling on trying to figure out how to keep adding the <Field /> component under the already existing <Field /> whenever the add button is clicked. I also need to ensure to have the ability to keep adding rather than having a specific number of available

I also cannot use the DOM as I am getting an error telling me to edit the state rather than using DOM.render

End Result should look something like this: --FieldSect.js--

<div>
   <Field />
   ...<Field /> (Button Add Click)
   ...<Field /> (Button Add Click)
   ..
</div>

Answer 1

You should have Fields be part of the state of your parent component, perhaps as an array, this.state = {fields:[{id:1},{id:2},{id:3}]} .

Then, when rendering, you can iterate over the array:

<div>
   {this.state.fields.map(f => <Field key={f.id}/>)}
</div>

Answer 2

Its super simple.

Have a default state of fields for example lets say that you want to have 1 field at the beginning

this.state = {
 fields: [<Field/>]
}

Now use onClick event for AddClick and a function as follows

handleOnClick=(event)=>this.setState(prevState=>({...prevState, fields: [...prevState.fields, <Field/>]})

And in your render function iterate over fields array

PS: I am not sure what is a Field doing.

What I would do is in render

<div>
   {this.state.fields.map(field => <Field {...field}/>)}
</div>

and fields would be the data of a field

Answer 3

If I'm understanding you correctly, you're wanting to add a every time someone clicks a button. If that's accurate, then I would simply add a constructor with a state to either the FieldSect.js or parent file to that (somewhere along the line before Field.js) that creates a trackable state. Something like:

this.state = {
        NumberOfFields: 1
    };

If you do this ahead of FieldSect.js, then it needs to be passed down in props.

Now you need to set up the onClick function to increment this state. Using this, you can then create a loop in FieldSect.js that creates an array of elements that will be rendered in React.

let array = []
for(let i = 0; i < this.NumberOfFields; i++){
  array.push(<Field key={Math.random()}/>)
}

Then, instead of using in FieldSect.js, use {array}.

The reason I added the key attribute to the Field is that all elements that are derived from an iteration like this must have a unique key.

Answer 4

Here you go.

This holds the number of <Fields /> in the state of a controlled component, which can be incremented with the button.

The loop is generated by creating an Array of nbrOfFields length, destructured, and then mapped over.

 const Field = () => ( <div> <label> Test </label> <input type="text" /> </div> ); class App extends React.Component { constructor() { super(); this.state = {nbrOfFields: 1}; this.addField = this.addField.bind(this); } addField() { this.setState(prevState => ({nbrOfFields: prevState.nbrOfFields + 1})); } render() { return ( <div> {[...Array(this.state.nbrOfFields)].map((item, i) => ( <Field key={i} /> ))} <button onClick={this.addField}>Add field</button> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>