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

Question

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

App.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: 'max.max@max.in'
      }
    ]
  };

Demo of my current page.

Answer 1

这是我的解决方案codesandbox

您需要有两个输入，即电子邮件和姓名，并根据更新的输入，更新数组中人员的值。

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  state = {
    fields: []
  };

  addPerson() {
    const newPerson = {
      id: Math.random(),
      name: "",
      email: ""
    };

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

  handleChange(e, index) {
    const fieldsCopy = [...this.state.fields];

    fieldsCopy.forEach(item => {
      if (item.id === index) {
        item[e.target.name] = e.target.value;
      }
    });
    this.setState({ fields: fieldsCopy }, () => console.log(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 => {
              return (
                <div key={field.id}>
                  <input
                    onChange={e => this.handleChange(e, field.id)}
                    name="name"
                  />
                  <input
                    onChange={e => this.handleChange(e, field.id)}
                    name="email"
                  />
                </div>
              );
            })}
            <button onClick={e => this.addPerson(e)}>Add Person</button>
            <button onClick={e => this.handleSubmit(e)}>Submit</button>
          </div>
        </header>
      </div>
    );
  }
}