Создание простой реакции «датируемый» - PullRequest
Новая
       6

Создание простой реакции «датируемый»

0 голосов
/ 28 октября 2019

Я думал, что, возможно, смогу создать свой собственный «набор данных», так как мне не нужно много функций и из-за недостатка навыков я не могу заставить работать какие-либо из существующих компонентов с реагирующими данными, которые мне нужны. Но у меня есть несколько вопросов.

1: я могу добавить одну строку таблицы, но если я снова нажму на кнопку добавления строки, то произойдет сбой, что я делаю не так?

2: Я полагаю, чтоМне нужно сохранить все значения строк в виде объектов в переменном useState, как мне проще всего сохранить все значения из разных строк таблицы?

3: Может быть, вопрос 2, как я могу сделатькнопка удаления удалить текущую строку?

enter image description here

Это мой текущий код: 

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>
...