如何在 reactJS 中添加多个相同的字段表单？

Question

我想在我的表单中动态添加多个人。就像我有第 1 个人的用户名和电子邮件一样，当我单击添加个人时，它应该在同一页面上为第 2 个人创建相同的字段。当我单击提交按钮时，它应该给我所有人的对象。应用程序.jsimport './App.css';import React, { Component } from 'react'import PropTypes from 'prop-types'export default class App extends Component {  state = {    fields:[]  };  addPerson() {    this.setState({fields:[...this.state.fields, ""]})  };  handleChange(e, index) {    this.state.fields[index] = e.target.value;     this.setState({fields: this.state.fields});  }  handleSubmit(e) {    console.log(this.state,"$$")  }  render() {    return (      <div className="App">      <header className="App-header">      <div>            <h1>The Form</h1>            {                this.state.fields.map((field, index) => {                  return(                    <div key={index}>                        <input onChange={(e)=>this.handleChange(e, index)} value={field}/>                    </div>                )              }              )            }            <button onClick={(e) => this.addPerson(e)}>Add Person</button>            <button onClick={(e) => this.handleSubmit(e)}>Submit</button>        </div>      </header>    </div>    )  }}我希望我的状态是这样的...... state = {    fields:[      {        id: 1,        name: 'Max',        email: '[e-mail]'      }    ]  };

Answer 1

我想在我的表单中动态添加多个人。就像我有第 1 个人的用户名和电子邮件一样，当我单击添加个人时，它应该在同一页面上为第 2 个人创建相同的字段。当我单击提交按钮时，它应该给我所有人的对象。

应用程序.js

import './App.css';

import React, { Component } from 'react'

import PropTypes from 'prop-types'

export default class App extends Component {

  state = {

    fields:[]

  };

  addPerson() {

    this.setState({fields:[...this.state.fields, ""]})

  };

  handleChange(e, index) {

    this.state.fields[index] = e.target.value; 

    this.setState({fields: this.state.fields});

  }

  handleSubmit(e) {

    console.log(this.state,"$$")

  }

  render() {

    return (

      <div className="App">

      <header className="App-header">

      <div>

            <h1>The Form</h1>

            {

                this.state.fields.map((field, index) => {

                  return(

                    <div key={index}>

                        <input onChange={(e)=>this.handleChange(e, index)} value={field}/>

                    </div>

                )

              }

              )

            }

            <button onClick={(e) => this.addPerson(e)}>Add Person</button>

            <button onClick={(e) => this.handleSubmit(e)}>Submit</button>

        </div>

      </header>

    </div>

    )

  }

}

我希望我的状态是这样的......

 state = {

    fields:[

      {

        id: 1,

        name: 'Max',

        email: '[e-mail]'

      }

    ]

  };