Как редактировать / обновлять значения в приложении CRUD в ReactJS - PullRequest
Новая
       4

Как редактировать / обновлять значения в приложении CRUD в ReactJS

0 голосов
/ 06 февраля 2020

Попытка добавить возможность, когда пользователь добавляет элемент в таблицу, редактировать значения, когда они нажимают кнопку редактирования.

Код в разделе Изменить проект ниже в моем коде не работает. Я пытался найти кучу разных способов, как это сделать, но я все время терплю неудачу.

Есть идеи, как мне это легко сделать?

Ссылка на codesandbox .

MainCrud. js

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 => {
  // Initiazle project data
  const projectData = [];

  // Initial state for edit button's hidden state to be false
  const [editBtn, setEditBtn] = useState(false);

  // Initialize state of the project data above to 'projects'
  const [projects, setProject] = useState(projectData);

  // Add Project
  const addProject = project => {
    // Create new item with a unique ID
    project.id = projects.length + 1;
    // Take the current list, and add onto it via the spread operator
    setProject([...projects, project]);
  };

  // Delete Project
  const deleteProject = id => {
    setProject(projects.filter(project => project.id !== id));
  };

  // Edit Project
  const editProject = e => {
    setEditBtn(true);
    this.setState({
      ...this.state.name,
      ...this.state.description,
      ...this.state.date,
      [e.target.name]: e.target.value
    });
  };

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

export default MainCrud;

1 Ответ

0 голосов
/ 06 февраля 2020

Я вижу, вы пытаетесь сделать this.setState в функциональном компоненте, чего вы не можете сделать. this будет указывать на undefined в этом случае

...