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

Question

I'm building a project management app, and I'm a bit new to Hooks, so please bear with me.

Link to the app , link to the code .

The user should have the ability to add a new project. They can add a name, description and date, which would then be automatically added to the table.

Currently, I'm unable to get it working. A user is unable to add a new project.

I can type in a new date in the Date field - but anytime I try to type in the Name or Description field, the values don't show and I get console errors thrown:

"Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method isDefaultPrevented on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist()."

The main issues that I'm trying to fix:

• Allow the user to type in the fields
• On hitting submit, they go into their proper areas in the table

In my code, mainCrud.js houses the initial data as well as the Add Project functionality. The data's passed down into the actual CrudAdd component, which houses the "Add Project" form:

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;

In CrudAdd.js, I'm setting the initial state of the form, updating the state of the form and adding the form submit:

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;

Any idea? Thanks in advance.

Answer 1

I got what's the problem in your code. You have not add name property in your input fields

 <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} />