Question

我对此完全迷失了。甚至不知道从哪里开始，所以请忍受我。

MainCrud.js-包含删除功能
CrudTable.js-放置表格

我希望在将用户添加到应用程序中的表后，能够编辑该用户。理想情况下，通过以下方式：

用户单击编辑按钮
点击。
- 编辑按钮变为更新按钮
- 在表中，所有值都变成输入字段，其中的值已预先填充
用户完成更新后，他们将点击更新按钮
- 点击更新后，该行的原始状态再次出现（编辑按钮，已更新的行）

Link to 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 = () => {
    // On click, set state for edit button's state to be true, to hide it
    setEditBtn(true);
    console.log("edit");
  };

  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;

CrudTable.js

import React, { Component } from "react";

import "../crudTable/crud-table.scss";

class CrudTable extends Component {
  render() {
    const props = this.props;
    return (
      <div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Project Description</th>
                <th scope="col">Date</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {props.projectData.length > 0 ? (
                props.projectData.map(project => (
                  <tr key={project.id} id={project.id}>
                    <td>{project.name}</td>
                    <td>{project.description}</td>
                    <td>{project.date}</td>
                    <td>
                      <button
                        onClick={() => props.editProject()}
                        className="btn btn-warning"
                        id="edit"
                      >
                        Edit
                      </button>
                      <button
                        onClick={() => props.deleteProject(project.id)}
                        className="btn btn-danger"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td>No projects found. Please add a project.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

导出默认的CrudTable；

如何在ReactJS中编辑现有字段？

0 个答案: