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

Question

我想在我的表单中动态添加多个人。就像我有第 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]'

      }

    ]

  };

Answer 1

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