如何在 ReactJS 的 CRUD 應用程序中編輯/更新值

Question

嘗試添加功能，當用戶向表中添加項目時，一旦他們點擊編輯按鈕，就可以編輯值。

我的代碼中下面“編輯項目”下的代碼不起作用。 我試圖研究如何做到這一點的一系列不同的方法，但我一直在做空。

關於如何輕松做到這一點的任何想法？

鏈接到代碼和框。

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;

Answer 1

我看到您正在嘗試在功能組件中執行this.setState ，這是您無法做到的。 在這種情況下this將指向undefined