Я создаю приложение для управления проектами, и я немного новичок в Hooks, поэтому, пожалуйста, потерпите меня.
Ссылка на приложение , ссылка на code .
У пользователя должна быть возможность добавить новый проект. Они могут добавить имя, описание и дату, которые затем будут автоматически добавлены в таблицу.
В настоящее время я не могу заставить ее работать. Пользователь не может добавить новый проект.
Я могу ввести новую дату в поле Дата - но всякий раз, когда я пытаюсь ввести поле Имя или Описание, значения не отображаются, и я получаю выдается консольных ошибок:
"Предупреждение. Это событие синтеза c используется повторно по соображениям производительности. Если вы видите это, вы получаете доступ к методу isDefaultPrevented в освобожденном / аннулированном синтезаторе c event. Это неоперационная функция. Если вам нужно сохранить исходное событие syntheti c, используйте event.persist (). "
Основные проблемы, которые я пытаюсь исправить:
- Разрешить пользователю вводить в поля
- При нажатии кнопки отправки они go попадают в соответствующие им области таблицы
В моем коде 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;
Есть идеи? Заранее спасибо.