Вы новичок в реакции и хотите создать с ней что-то новое?! Тогда эта статья для вас. Здесь мы собираемся создать приложение для выставления счетов, которое может просто преобразовать нашу HTML-форму в файл PDF, который будет выглядеть как копия счета. Давайте начнем!

Необходимое условие:

//For creating react app named practise:
npx create-react-app practise
//To create pdf file in form of table:
npm i jspdf
npm i jspdf-autotable

О нашем приложении:

Наше приложение будет обладать следующими качествами:

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

Создание именованного элемента состояния:

Давайте создадим состояние с именем item, а затем инициализируем значение необходимых объектов пустым или нулем, как показано ниже:

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

Создание интерфейсной части пользовательского интерфейса:

Теперь давайте создадим html-форму внутри файла App.js реагирующего приложения и добавим в нее все необходимые поля ввода, как показано ниже:

В приведенном выше коде мы используем элемент как массив и пытаемся создать столько полей ввода на основе количества этого элемента.

Добавление дополнительных полей ввода при нажатии кнопки "Добавить":

Теперь давайте добавим еще несколько функций на наш статический веб-сайт. Давайте добавим функциональность onClick, которая может добавить дополнительное текстовое поле при нажатии кнопки «Добавить». Также давайте добавим функцию addItem, которая может изменять состояние элемента с помощью функции setItem.

<button type='button' onClick={addItem}>Add+</button>

Обработка изменений в поле ввода:

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

Добавление функции удаления кнопки:

Теперь пришло время добавить функцию удаления кнопки. После нажатия кнопки «Удалить» мы должны передать значение индекса соответствующего поля ввода, а затем удалить это значение индекса из элемента. Мы могли бы сделать это с помощью приведенного ниже фрагмента кода,

<button key={index} onClick={() => removeEntry(index)}>Remove</button>

Расчет общей суммы платежа:

Мы почти близки к созданию биллингового приложения. Пришло время рассчитать общую сумму счета на основе наших входных данных, которые мы дали в каждом поле ввода. Давайте добавим общую сумму счета в качестве нового состояния, а также добавим ее в наш тег формы, который может динамически меняться.

Внутренняя форма:

<h3>Total amount: {billTotal ? billTotal : 0}</h3>

Изменение суммы счета с помощью реакции useEffect:

Преобразование HTML-формы в PDF:

Теперь мы подошли к концу нашей части кодирования. Нам нужно преобразовать наши значения формы, которые мы добавили, в файл PDF. Давайте импортируем jspdf и jspdf-autotable, а затем добавим функцию handleSubmit в файл App.js.

import { jsPDF } from "jspdf";
import autoTable from  'jspdf-autotable'

Вот и все!! Мы закончили преобразование формы HTML в PDF с помощью React. Ваш окончательный App.js будет выглядеть следующим образом:

Мой завершенный проект реакции можно найти в следующем репозитории git — ссылка

Я добавлю еще один функционал по сохранению его в базе данных и сделаю еще один блог об этом.

Удачного кодирования :-)