如何在 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>
    );
  }
}

Answer 2

已编辑：

这是我的版本：

import './App.css';

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class App extends Component {

  index = 0;
  state = {
    fields: []
  };

  handleChange(e, idx) {
    const { name, value } = e.target;
    this.setState(state => {
      return state.fields[idx][name] = value;
    });
  }

  addPerson = () => {
    const person = { id: this.index, name: '', email: '' };
    this.index++;
    this.setState({ fields: [ ...this.state.fields, person ] })
  }

  handleSubmit = () => {
    console.log(this.state.fields);
  }

  render() {
    const { fields } = this.state;
    return (
      <div className="App">
      <header className="App-header">
        <div>
          <h1>The Form</h1>
            {fields.length
              ? fields.map((field, idx) => (
                <div key={idx}>
                  <label>Name:</label>
                  <input type="text" onChange={(e)=>this.handleChange(e, idx)} name="name" value={field.name}/>
                  <label>Email:</label>
                  <input type="email" onChange={(e)=>this.handleChange(e, idx)} name="email" value={field.email}/>
                </div>
                ))
              : null
            }
          <button onClick={this.handleSubmit}>Submit</button>
          <button onClick={() => this.addPerson()}>Add Person</button>
        </div>
      </header>
    </div>
    )
  }
}

如果您在此组件状态之外使用人员 ID 作为唯一标识符，我建议您使用一些 ID 生成器库，例如 uuid。

我希望这会有所帮助！