时间戳

首页 > 解决方案 > 处理多个 React 表单输入并更新组件的状态

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

问题描述

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

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

想要的结果应该如下所示：

state = { persons: [{Per1},{Per2},{Per3} etc] }

或者

state = { persons: {{Per1},{Per2},{Per3} etc} }

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

这是我的代码：

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;

标签： reactjs

解决方案

我的第一个问题是为什么你需要在一个“PersonForm”中存储多个“Persons”？我希望这个组件的状态只包含一个人的状态，而不是多个。

如果您想显示多个人，我建议将道具传递给此组件，例如handleSubmit. 并在父组件中管理多人。

关于：

想要的结果应该如下所示：

状态 = { 人员：[{Per1}、{Per2}、{Per3} 等] }

或者

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

第二个不是有效的Javascript。你的选项要么是一个 Persons 数组，要么是一个带有一些键值的 Object。在人的情况下，身份证可以工作。例如：

{
 people: {
    "id1": { ... },
    "id2": { ... },
 }
}

在不了解上下文的情况下，我建议只使用一个数组，因为它更简单，并且可能足以满足您的用例。

关于：

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

只需创建多个处理程序。每个字段一个。例如：

handleNameUpdated = () => { ... }
handleSurnameUpdated = () => { ... }
handleAgeUpdated = () => { ... }
handleDateUpdated = () => { ... }

然后在您的处理程序中更新相关的状态。例如：

handleNameUpdated = () => {
  this.setState({ name: e.currentTarget.value });
}

推荐阅读