我正在构建一个项目管理应用程序，我对 Hooks 有点陌生，所以请耐心等待。
链接到应用程序，链接到代码。
用户应能够添加新项目。他们可以添加名称、描述和日期，然后会自动将其添加到表中。
目前，我无法让它工作。用户无法添加新项目。
我可以在"日期"字段中输入新日期 - 但是每当我尝试输入"名称"或"描述"字段时，值都不会显示，并且会抛出控制台错误：
"警告：出于性能原因，将重用此综合事件。如果看到此内容，则表示您正在访问已发布/无效合成事件上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;
知道吗？提前谢谢。
我知道你的代码有什么问题。您尚未在输入字段中添加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}
/>