创建一个简单的反应“数据表”

Question

我当时想我可以创建自己的“数据表”，因为我不需要很多功能，而且由于我缺乏技能，无法使任何现有的反应数据表组件正常工作。但是我有一些问题。

1：我可以添加一个表格行，但是如果我再次单击“添加行”按钮，它会崩溃，那我在做什么错了？

2：我想我需要将所有行值作为对象存储在useState变量中，如何以最简单的方式存储来自不同表行的所有值？

3：可能意识到问题2，如何使删除按钮删除当前行？

这是我当前的代码：

import React, { useState } from "react";

//suppressContentEditableWarning={true}
const Datatables = () => {
  const [rows, setRows] = useState([]);
  
  const blankRow = () => {
    return (
      <tr>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td className="pt-3-half" contentEditable="true"></td>
        <td>
          <span className="table-remove">
            <button
              type="button"
              className="btn btn-danger btn-rounded btn-sm my-0"
            >
              Remove
            </button>
          </span>
        </td>
      </tr>
    );
  };

  const addNewRowHandler = () => {
    console.log("New Row!!");
    setRows(...rows, blankRow);
  };

  return (
    <div className="card">
      <h3 className="card-header text-center font-weight-bold text-uppercase py-4">
        Editable table
      </h3>
      <div className="card-body">
        <div id="table" className="table-editable">
          <span className="table-add float-right mb-3 mr-2">
            <a href="#!" className="text-success">
              <i
                className="fas fa-plus fa-2x"
                aria-hidden="true"
                onClick={addNewRowHandler}
              ></i>
            </a>
          </span>
          <table className="table table-bordered table-responsive-md table-striped text-center">
            <thead>
              <tr>
                <th className="text-center">Kontonummer</th>
                <th className="text-center">Beskrivning</th>
                <th className="text-center">Projekt</th>
                <th className="text-center">Debit</th>
                <th className="text-center">Kredit</th>
                <th className="text-center">Belopp</th>
                <th className="text-center">Moms</th>
                <th className="text-center">Ta bort</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default Datatables;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>