如何使用 React Hooks 在提交到表格时添加表单值

Question

我正在构建一个项目管理应用程序，我对 Hooks 有点陌生，所以请多多包涵。

链接到app，链接到code。

用户应该能够添加新项目。他们可以添加名称、描述和日期，然后会自动添加到表格中。

目前，我无法让它工作。用户无法添加新项目。

我可以在“日期”字段中输入新日期 - 但每当我尝试在“名称”或“描述”字段中输入时，值不会显示，并且会引发控制台错误：

“警告：出于性能原因，此合成事件被重用。如果您看到这个，您正在访问方法 isDefaultPrevented 对已发布/无效合成事件。这是一个无操作函数。如果您必须保留原始合成事件，使用 event.persist()。"

我要解决的主要问题：

• 允许用户在字段中输入
• 点击提交后，他们会进入表格中的相应区域

在我的代码中，mainCrud.js 包含初始数据以及添加项目功能。数据被传递到实际的 CrudAdd 组件中，该组件包含“添加项目”表单：

import React, { useState } from "react";

import CrudIntro from "../crud/crudIntro/crudIntro";
import CrudAdd from "../crud/crudAdd/crudAdd";
import CrudTable from "../crud/crudTable/crudTable";

const MainCrud = props => {
  // Project Data
  const projectData = [
    {
      id: 1,
      name: "Skid Steer Loaders",
      description:
        "To advertise the skid steer loaders at 0% financing for 60 months.",
      date: "February 1, 2022"
    },
    {
      id: 2,
      name: "Work Gloves",
      description: "To advertise the work gloves at $15.",
      date: "February 15, 2022"
    },
    {
      id: 3,
      name: "Telehandlers",
      description: "To advertise telehandlers at 0% financing for 24 months.",
      date: "March 15, 2022"
    }
  ];

  const [projects, setProject] = useState(projectData);

  // Add Project
  const addProject = project => {
    project.id = projectData.length + 1;
    setProject([...projects, project]);
  };

  return (
    <div>
      <section id="add">
        <CrudIntro title={props.title} subTitle={props.subTitle} />
        <CrudAdd addProject={addProject} />
      </section>
      <section id="main">
        <CrudTable projectData={projects} />
      </section>
    </div>
  );
};

export default MainCrud;

在 CrudAdd.js 中，我正在设置表单的初始状态，更新表单的状态并添加表单提交：

import React, { useState } from "react";

import "../crudAdd/crud-add.scss";
import "../../button.scss";

const CrudAdd = props => {
  // Set the initial state of the form
  const initialFormState = {
    id: null,
    name: "",
    description: "",
    date: ""
  };
  const [project, setProject] = useState(initialFormState);

  // Update state within the form
  const handleInputChange = e => {
    const { name, value } = e.target;
    setProject({ ...project, [name]: value });

    console.log(e);
  };

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          if (!project.name || !project.username) return;

          props.addProject(project);
          setProject(initialFormState);
        }}
      >
        <input
          type="name"
          placeholder="Name..."
          id="name"
          value={project.name}
          onChange={handleInputChange}
        />
        <input
          type="description"
          placeholder="Description..."
          id="description"
          value=""
        />
        <input type="name" placeholder="Date..." id="date" />
      </form>
      <button className="btn btn-primary">Add Project</button>
    </div>
  );
};

export default CrudAdd;

有什么想法吗？提前致谢。

Answer 1

我知道你的代码有什么问题。您尚未在输入字段中添加 name 属性

<input
  name="name"
  type="name"
  placeholder="Name..."
  id="name"
  value={project.name}
  onChange={handleInputChange}
/>
<input
  name="description"
  type="description"
  placeholder="Description..."
  id="description"
  value={project.description}
/>