reactjs - 处理多个 react 表单输入并更新组件的状态

Question

我有一个包含多个输入的表单。 在表单提交上，我想更新组件状态并向其添加新条目。

问题，我不知道如何获取所有输入值，我应该使用 refs 吗？

想要的结果应该是这样的:

状态 = { 人员:[{Per1},{Per2},{Per3} 等] }

或

状态 = { 人员:{{Per1}、{Per2}、{Per3} 等} }

不知道什么是最好的...

这是我的代码:

class PersonForm extends Component {
  

import React, { Component } from "react";

import Input from "./input";

class PersonForm extends Component {
  state = {
    persons: {
      name: "urlTests",
      age: "titre",
      surname: "auteur",
      date: "2014-02-10T10:50:42",
    },
  };

  handleOnChange = (e) => {
    console.log(e.currentTarget.value);
    console.log(e.currentTarget.name);
    const persons = { ...this.state.persons };
    persons[e.currentTarget.name] = e.currentTarget.value;
    this.setState({ persons }); // Yes I can see the component getting updated in debug mode but do I need this?
  };

  // personForm
  handleOnSubmit = (e) => {
    e.preventDefault();
    console.log("onSubmit");
    const persons = { ...this.state.persons };
    console.log(persons);
    const newPersons = { !!!!!!!!! CREATE AN OBJECT OF THE PERSON INPUTS VALUES + PREVIOUS STATE};
    console.log(newPersons);

    this.setState({ persons: newPersons }); // UPDATE THE STATE
  };

  render() {
    return (
      <div id="contB">
        <h1>PersonForm Component</h1>

        <form onSubmit={this.props.onSubmit}>
          <Input
            // onChange={this.handleOnChange}
            type="text"
            name="name"
            placeholder="name"
          />
          <Input
            // onChange={this.handleOnChange}
            type="text"
            name="surname"
            placeholder="Auteur"
          />
          <Input
            // onChange={this.handleOnChange}
            type="number"
            name="age"
            placeholder="age"
          />

          <Input
            // onChange={this.handleOnChange}
            type="date"
            name="date"
            placeholder="Date"
          />
          <button type="submit">Create Person</button>
        </form>
      </div>
    );
  }
}

export default PersonForm;

Answer 1

首先，包含所有人员的单独数组和包含当前人员的对象:

state = {
  persons: [],
  person: {
    name: "urlTests",
    age: "titre",
    surname: "auteur",
    date: "2014-02-10T10:50:42",
  },
};

handleOnChange更新person ，因此包含来自输​​入的当前值:

handleOnChange = (e) => {
  this.setState({
    person: {
      ...this.state.person,
      [e.target.name]: e.target.value
    }
  });
};

handleOnSubmit添加person至persons :

handleOnSubmit = (e) => {
  e.preventDefault();
  this.setState({
    persons: [
      ...this.state.persons, 
      this.state.person
    ],
    person: {
      name: "",
      age: "",
      surname: "",
      date: "",
    }
  });
};

并且您需要添加value输入属性:

<Input
  onChange={this.handleOnChange}
  type="text"
  name="name"
  placeholder="name"
  value={this.state.person.name}
/>

这部分看起来很奇怪<form onSubmit={this.props.onSubmit}> - 也许这里应该只是 <form onSubmit={this.onSubmit}>没有props