Как сделать календарь на react

Обновлено: 04.07.2024

От автора: рассмотрим эффективный способ создания графиков React с помощью библиотеки KendoReact Charts. Прочитав эту статью, вы узнаете, как быстро реализовать гистограммы и диаграммы с помощью библиотеки, которая обеспечивает основу для элементов визуализации данных в вашем приложении React.

Веб-приложения часто должны помочь конечному пользователю разобраться в различных типах данных. Один из лучших способов представить данные в приятной и простой для понимания форме — это визуализировать их с помощью графиков (диаграмм).

В этой статье будет продемонстрирован эффективный подход к созданию графиков React с использованием библиотеки KendoReact Charts, а также мы реализуем интерактивную кольцевую диаграмму, столбчатую диаграмму, линейную диаграмму и диаграмму Sparkline. Выберем графическую библиотеку React, которая является частью KendoReact, поскольку она многофункциональна и легко настраивается. Как часть полной библиотеки компонентов React UI, эта библиотека визуализации данных действительно выделяется своей интеграцией с более чем 90 компонентами KendoReact, что позволяет разработчикам реализовывать согласованные стили и элегантный дизайн для всего проекта. А теперь приступим!

Настройка проекта

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


React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

React — это ведущая технология для разработки первоклассных пользовательских интерфейсов, быстрых, масштабируемых и, главное, многократно используемых. По данным опроса, проведенного StackOverFlow в 2021 году, React является самым востребованным веб-фреймворком. В 2022 году в React-разработчиках будет нуждаться больше компаний, чем когда-либо.

Что такое React.js?

React.js — это библиотека JavaScript, созданная компанией Facebook для создания масштабируемых компонентов пользовательского интерфейса. Она может использоваться для разработки одностраничных приложений, мобильных приложений, PWA (прогрессивных веб-приложений). Важнейшим фактором ее популярности является самый доступный в отрасли уровень обучения.

В этой статье будет подробно, шаг за шагом, рассказано, как стать разработчиком React.

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

JavaScript

Поскольку React — это библиотека JavaScript, важно иметь опыт работы с JS и понимание основополагающих концепций этого языка программирования. В настоящее время React состоит из React Hooks (хуков) и функциональных компонентов. Рекомендуется изучить ES6.

Концепции JavaScript, которые нужно знать:

  1. Переменные.
  2. Стрелочные функции.
  3. Типы данных и их методы.
  4. Манипуляции с Dom (document object model, объектная модель документа) и события.
  5. Функции высшего порядка и функции обратного вызова.
  6. Промисы.
  7. Асинхронный JS.

HTML/CSS

Структурные компоненты в React разрабатываются с использованием HTML и стилизуются с помощью CSS или сторонних инструментов. Предположим, вы создаете компонент кнопки. Этот компонент будет иметь информационную метку, стилевое оформление и определенные атрибуты. Чаще всего для создания этого компонента используется элемент HTML button, который будет стилизован с помощью CSS или любой другой библиотеки стилей.

Основные концепции React, которые необходимо освоить

1. Виртуальная Dom-модель и алгоритм Diffing

Виртуальная модель Dom и алгоритм Diffing — это то, что находится “за кулисами” React.js. Поскольку манипуляции с реальной dom-моделью слишком медленны, в React была использована концепция виртуальной dom-модели.

Виртуальная dom-модель — это абстракция реальной dom-модели. Каждый раз, когда компонент или элемент отображается, виртуальная dom-модель обновляется. Затем недавно обновленная виртуальная dom-модель сравнивается с копией предварительно обновленной виртуальной dom-модели, в результате чего определяется, какую из них нужно обновить.

Процесс сравнения двух виртуальных dom-моделей называется diffing (от differentiation, дифференцирование). На каждом этапе реальная dom-модель заменяется виртуальной dom-моделью, а обновленная виртуальная dom-модель становится предварительно обновленной виртуальной dom-моделью для следующего изменения dom-модели.

2. JSX: язык шаблонов React

JSX можно назвать синтаксисом React. Он расшифровывается как JavaScript XML (eXtensible Markup Language, расширяемый язык разметки). JSX помогает писать HTML-код на JavaScript и отображать пользовательский компонент на UI.

const blog = 'programinja'

Вы можете добавить переменную "blog" в элемент "p", используя возможности JSX.

3. Компоненты: строительные блоки приложений React

Приложение React состоит из компонентов. Все в приложении React — от простой кнопки до сложной диаграммы дашборда — это компоненты. Приведенный ниже фрагмент кода представляет простой компонент React и отображает ссылку в пользовательском интерфейсе.

import React from 'react'

export default SimpleComponent

Этот компонент не является многоразовым, так как его метка и URL фиксированы. Чтобы сделать компонент многократно используемым, необходимо применять props (от properties, свойства) — пропсы.

4. Пропсы

Пропсы — это объекты-свойства, используемые для передачи данных, доступных только для чтения, между компонентами React. Пропсы могут передаваться как переменные или объекты в однонаправленном потоке.

import React from 'react'

export default SimpleComponent

Компонент Link теперь используется многоразово и может быть отображен с различными метками и URL, как показано в следующем фрагменте.

import SimpleComponent from './simpleComponent'

5. Управление состоянием

Говоря простым языком, состояние — это объект JavaScript, хранящий изменяемые данные, которые могут быть использованы и обновлены компонентом. Любое изменение состояния приводит к повторному отображению компонента. Традиционно состояние ассоциируется с компонентами, основанными на классах, однако с помощью хука useState/useReducer им можно управлять в функциональных компонентах.

Управление состоянием может осуществляться на уровне компонента путем вызова хука useState и на глобальном уровне с помощью решений по управлению состоянием, таких как Redux, Context API, Recoil и т. д.

6. Хуки React

В 2018 году в React 16.8 появились хуки. Хуки React помогают управлять состояниями и методами жизненного цикла функциональных компонентов, сделав излишними компоненты на основе классов. Хуки можно использовать только в функциональных компонентах и на верхнем уровне.

Базовые хуки:

  • useState;
  • useEffect;
  • useContext.

Дополнительные хуки:

  • useReducer;
  • useCallback;
  • useMemo;
  • useRef;
  • useImperativeHandle;
  • useLayoutEffect;
  • useDebugValue.

import React, < useState >from 'react'

const [sum, setSum] = useState(1) /// Начальное значение суммы равно 1.

export default App

В приведенном выше компоненте управление состоянием осуществляется через хук useState на локальном уровне.

7. Создание собственных пользовательских хуков

Пользовательские хуки могут быть созданы для совместного многократного использования функциональной логики в нескольких компонентах. Например, можно создать пользовательский хук для определения ширины окна браузера или получения данных из API. Имя пользовательского хука начинается с use .

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

const [size, setSize] = useState([0, 0])

return () => window.removeEventListener('resize', updateSize)

export default useWindowSize

Для определения ширины окна и отображения компонентов в настольных или мобильных устройствах (в соответствии с размерами экрана) можно использовать хук useWindowSize.

const NavBar = () => const [width] = useWindowSize()
return (
width > 786 ? :
)
>

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

Продвинутые темы React

  1. Компоненты более высокого порядка.
  2. Разделение кода.
  3. Ссылки.
  4. Контекстный API.
  5. Рендеринг на стороне сервера.
  6. Компонент React Suspense.
  7. Компоненты React Server.

После освоения этих концепций у вас будут все основания называться разработчиком React.

Однако, поскольку React сам по себе является библиотекой, вам придется использовать другие библиотеки и узловые пакеты (например, React Router — для маршрутизации, Redux — для управления состоянием и т. д.), предоставляющие больше функциональных возможностей.

Экосистема React

1. React Router/React Router Dom

React Router — это библиотека маршрутизации для перехода между компонентами React путем изменения URL-адресов. Когда пользователь переходит по URL, React Router определяет, установлен ли компонент для отображения по этому маршрутизатору, и выполняет рендеринг в пользовательском интерфейсе.

2. Управление состоянием с помощью сторонних библиотек

React обеспечивает управление состоянием на уровне компонентов и глобальном уровне с помощью хука useState и Context API. Однако, если приложение очень сложное и требует большей степени контроля, можно использовать сторонние инструменты, такие как Redux , Recoil и Mobx .

3. Формы

Создание динамических и сложных форм с валидацией и прочими элементами требует использования специальных библиотек. Для разработки форм широко используются Formic и React Hooks Forms . Эти библиотеки легко справляются со всеми аспектами формы. Yup широко используется для добавления валидации.

4. Тестирование React

Тестирование React — это концепция проверки компонентов в соответствии с предъявляемыми к ним требованиями. Например, вы создали поле ввода и ожидаете, что оно будет вести себя определенным образом. Тест будет написан с учетом этого сценария использования.

В отличие от ручной проверки, автоматизированное тестирование обеспечивает стабильное функционирование компонентов и позволяет экономить время, а также быстро выявлять ошибки. Для разработчика важно уметь писать тестовые сценарии для созданных им компонентов. Jest, Cypress и React Testing Library широко используются для тестирования приложений React.

5. Стилизация/библиотеки пользовательского интерфейса

Вместо создания компонентов пользовательского интерфейса, таких как Modals, Buttons, Menu, Dropdowns и т. д., можно использовать любую библиотеку пользовательского интерфейса. Базовыми являются Material-UI , Antd , Bootstrap . Кроме того, существует множество библиотек стилей для разработки индивидуального стилевого оформления, например Styled-components , Tailwind CSS .

6. Работа с API

Множество библиотек на базе промисов предлагают отличные решения для работы с Rest и GraphQL API. Axios и Superagent являются популярными для Rest API. Apollo и Relay доминируют в GraphQL.

Инструменты, которые нужно изучить

  1. NPM.
  2. Git.
  3. Webpack.
  4. Heroku/Netlify.
  5. Firebase/AWS Amplify.

Проекты для обучения

  1. Магазины электронной коммерции.
  2. Приложение со списком дел.
  3. Базовое приложение SaaS (software as a service, программное обеспечение как услуга).

Поздравляем! После освоения перечисленных здесь концепций вы сможете освоить React. Начинайте применять полученные навыки и продолжайте учиться.


Задачей этого руководства было не идти проторенным путем “волшебных” готовых шаблонов (например create-react-app и react-boilerplate), а самостоятельно разобраться во множестве динамических компонентов, формирующих приложение React .

До этого подобную тему освещал Jedai Saboteur в своей статье Creating a React App… From Scratch (англ.), на которую ввиду ее грамотности даже сделали ссылку в официальной документации React.

Как бы то ни было, но время идет, и я р ешил создать современное приложение React с нуля в 2021 году. В итоге было решено добавить в цепочку инструментов ряд “важных элементов” и задействовать последние версии основных библиотек. В некотором смысле у меня получилась последняя версия вышеприведенного руководства.

Наша цель проста: создать приложение React с нуля. “С нуля” подразумевает не то, что я буду разрабатывать вспомогательные инструменты, а то, что вместо использования, например, create-react-app , я сконфигурирую их самостоятельно.

Тем не менее помимо настройки простого рабочего приложения я также определил пару дополнительных, “важных” по меркам современного стека, требований:

  1. Поддержка TypeScript.
  2. Возможность внешнего управления состоянием.

Озадачившись списком необходимых инструментов, я решил обратиться к документации React.

После прочтения раздела Creating Toolchain from Scratch я прикинул следующий список:

Пакетный менеджер, например Yarn или npm. Позволяет воспользоваться возможностями огромной экосистемы сторонних пакетов, облегчая их установку и обновление.

Бандлер, например webpack или Parcel. Позволяет писать модульный код и связывать его воедино в небольшие пакеты, оптимизируя время загрузки.

Компилятор, например Babel. Дает возможность писать современный JS-код, который будет успешно работать в старых браузерах.

Этот краткий отрывок достаточно подробно раскрывает суть необходимых компонентов. В итоге на их роли я выбрал:

  • Пакетный менеджер: Yarn
  • Бандлер: webpack
  • Компилятор: Babel

Это вполне типичные варианты. Даже если вам не приходилось заниматься самостоятельной настройкой этих инструментов, то вы наверняка с ними либо работали, либо просто о них слышали.

Однако, согласно моим требованиям, все еще недостает одного элемента: библиотеки управления состоянием.

Redux могла стать очевидным выбором, но я предпочел Kea. Дело в том, что разработана Kea на базе Redux, но при этом существенно упрощает управление состоянием.

По правде говоря, здесь я определенно предвзят, так как выбрал Kea больше из-за того, что использую эту библиотеку на работе, а разработал ее мой коллега.

Сперва создайте каталог и выполните в нем yarn init .

Когда система попросит задать entry point , укажите src/index.tsx . Далее станет понятно, почему именно так.

Далее внутри этого каталога создайте еще два: src и public .

В src будет храниться весь исходный код проекта, а в public мы разместим статические ресурсы.

Наше руководство будет не универсальным, а обучающим, и работа с возникающими сложностями станет его неотъемлемой частью.

В связи с этим, при установке инструментов я не буду указывать номера их версий. Если же вы захотите использовать мой вариант в качестве шаблона, то можете посмотреть их в package.json .

В качестве примера я решил взять для этого руководства webpack v5, который вызвал ряд проблем совместимости с конфигурациями, используемыми мной ранее в проектах с webpack v4. Как обычно разобраться с этой проблемой и попутно запастись дополнительными знаниями мне помогла документация, различные статьи и посты на Stack Overflow.

Babel

Для работы Babel требуется еще несколько пакетов, которые устанавливаются так:

babel-core — это компилятор, то есть сам основной компонент.

babel-cli позволит использовать компилятор из командной строки.

Последние три пакета — это “шаблоны” (настройки) Babel для работы с различными сценариями использования. present-env избавляет нас лишних проблем, позволяя писать современный JS-код и обеспечивая его работоспособность на различных клиентах. preset-typescript и preset-react говорят сами за себя: так как используем мы и TypeScript, и React, то нам понадобятся они оба.

В завершении нужно сконфигурировать файл babel/config.js , указав компилятору используемые настройки:

TypeScript

В этом проекте мы будем использовать TypeScript, поэтому у него будут свои дополнительные настройки.

Сначала установим пакет typescript :

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

В них содержатся объявления типов для модулей, которые мы задействуем в проекте.

Помимо этого, нам также нужен файл tsconfig.json . Я использую конфигурацию с PostHog, с которой мы работаем в продакшене:

Можете смело менять приведенную конфигурацию под свои нужды. Тем не менее важно сохранить эти опции:

"jsx": "react" говорит сама за себя. Что же касается noEmit , то для нее мы устанавливаем true , так как Babel компилирует TS автоматически, и typescript нам нужен только для проверки ошибок (например, при написании кода).

Webpack

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

webpack и webpack-cli следуют тому же принципу, что и Babel. Первый является основным пакетом, а второй позволяет обращаться к нему через командную строку.

webpack-dev-server требуется нам для локальной разработки. Вы заметите, что package.json никогда не ссылается на него из скрипта, но он необходим для запуска webpack serve :

Последними идут загрузчики, нужные для разных файлов, которые мы будем обрабатывать. ts-loader также присутствует, но поскольку мы используем для компиляции JS-файлов Babel, фактичекски, он нам не понадобится.

В завершении, как и для Babel, нужно настроить файл конфигурации webpack.config.js :

React

Учитывая, что создаем мы приложение React, нам также нужны и соответствующие пакеты.

Этого будет достаточно:

react говорит за себя. react-dom будет использоваться для рендеринга приложения в index.tsx , а react-hot-loader для разработки. Он будет автоматически обновлять файл при внесении изменений.

В завершении настроим библиотеку управления состоянием.

Согласно документации нам нужно следующее:

Здесь мы подумаем наперед и добавим отдельный пакет, который используется при написании логики Kea в TypeScript:

package.json

После всей этой настройки нужно добавить в package.json пару скриптов:

start будет запускать сервер, а typegen генерировать типы для файлов логики Kea.

Нехило так настроечек? Думаю, что шаблоны определенно заслуживают благодарности, особенно, когда они берут на себя все управление зависимостями и версионирование (react-scripts).

Как бы то ни было, но с настройкой мы закончили, и пора заняться кодом.

Но сначала немного чистого HTML

Первым делом нам нужен файл index.html , который React будет использовать для отрисовки приложения. Это будет наш единственный файл .html . Он также будет единственным в каталоге public/ .

Вот мой index.html :

Здесь происходит несколько действий:

Точка входа

Помните упоминание о точке входа? Что ж, вот мы до нее и добрались. Перейдите в подкаталог src/ и создайте файл index.tsx .

Вот содержимое моего:

Здесь происходит три основных действия:

  1. Мы настраиваем Kea, которая, подобно Redux, использует Provider , делая хранилище доступным для всех вложенных компонентов (в нашем случае для всего приложения).
  • Вызов resetContext здесь, по сути, не нужен, так как в него ничего не передается. Тем не менее я его оставил, чтобы вы знали, куда добавлять, к примеру, плагины Kea, так как они вам наверняка понадобятся.

2. Мы импортируем и отрисовываем компонент App (который еще не собран).

3. Мы сообщаем React отрисовать приложение, используя div root из index.html в качестве "точки привязки".

Приложение!

Далее также внутри src/ создайте файл App.tsx со следующим содержимым:

Если в этот момент вы просто хотите увидеть приложение в действии, то можете удалить импорты и ссылки на MyJsComponent и Counter , после чего выполнить yarn start . Это запустит сервер, и вы сможете перейти к приложению по адресу localhost:3000 , где оно поприветствует вас фразой “Hello world!”.

Эти два дополнительных компонента я включил, чтобы убедиться в следующем:

  1. Возможности написания JavaScript параллельно с TypeScript.
  2. Возможности управления состоянием.
  3. В том, что бандлер без проблем обрабатывает файлы .css ( Counter содержит минимальную стилизацию).

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

Написание JS и TS

Как вы видели в App.tsx , у нас есть TS-файл, спокойно импортирующий JS-файл.

Проблем не возникает, так как в webpack.config.js установлено это правило:

Если удалить j из test , то использовать JS-файлы с помощью TS-файлов мы не сможем.

Чтобы убедиться в работоспособности этой схемы, я просто создал мелкий JS-компонент и импортировал его в приложение.

Создал я его в новом каталоге components/ , заполнив следующим содержимым:

Counter

Последним я добавил в этот мини-проект традиционный React-компонент Counter.

Задачей было убедиться в работоспособности настроек Kea и в том, что при этом также работает импорт CSS-файлов.

Сначала я создал в components/ подкаталог Counter . В него я добавил три файла:

1. index.tsx — содержит сам компонент:

Все довольно просто. Кликаем + , и отсчет идет вверх, кликаем - , и он устремляется вниз. Установите любое число, используя ввод, и отсчет также обновится.

Обратите внимание на импорт stype.css .

2. counterLogic.ts — размещает в себе логику управления состоянием, используемым компонентом Counter . Я не стану объяснять, как работает Kea, но тут все должно быть понятно само собой:

3. style.css — здесь я использовал минимальную стилизацию просто, чтобы убедиться в правильной работоспособности CSS:

Если вы добрались до этой части, то, надеюсь, на выходе вы получили свежеиспеченное приложение React, современный шаблон, а также некоторый багаж дополнительных знаний. Честно говоря, здесь я просто задокументировал часть своего процесса обучения, но и вы наверняка из этого что-нибудь да почерпнули!

При работе с таблицами, как правило, требуется возможность адаптировать и настраивать различные свойства таблицы в соответствии с поставленной задачей. Среди них:

определение видов столбцов и заголовков,

Для JS (JavaScrypt) и React-приложений существует много фреймворков, один из самых популярных – это бесплатный, открытый HTML, CSS и JS фреймворк Bootstrap, который широко используется веб-разработчиками для дизайна и вёрстки сайтов и web-приложений.

В этой статье я покажу, как работать с таблицами в React, используя специальный компонент — React Bootstrap Table, точнее, его обновленную версию — React Bootstrap Table2. На его основе можно создать достаточно сложные и красиво оформленные таблицы, затратив при этом не много усилий, и при этом настроить необходимые аспекты под свой проект.

Для работы с Bootstrap необходимо добавить CSS bootstrap в файле public/index.html.

Для возможности использовать компонент React Bootstrap Table необходимо сначала установить пакеты с необходимыми опциями. В отличие от первой версии React Bootstrap Table2 разбит на разные пакеты по функциональности.

В нашем проекте достаточно установить 2 пакета:

И пакет с опциями для редактирования ячеек:

В качестве входных данных пока используются dummy – данные, которые передаются через сервис получения данных dataService. В дальнейшем данные можно будет получать из любых других источников, например, из базы данных или файла, переписав только сервис получения данных.

В этой статье не предполагается подробного описания построение самого проекта на REACT+REDUX, поэтому приводится только состав основного файла проекта index.js, в котором используется Provider из пакета react-redux для передачи атрибута store (т.е. единого хранилища данных) всем вложенным компонентам, а также передача контекста – сервиса получения данных dataService через Provider пакета react (DataProvider). Описание структуры и пошаговое описание создания REACT +REDUX проекта Вы можете посмотреть в статье по ссылке

Основной файл index.js:

import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app'; import from './components/datastore-service-context'; import DataService from './components/services'; import from 'react-redux'; import store from './store'; const dataService=new DataService(); ReactDOM.render(

Файл основного компонента – app.js:

В рамках данной статьи нас будет интересовать компонент VkladList, содержащий табличные данные.

Итак, для использования таблицы react-bootstrap-table2 импортируем компонент из ранее установленного пакета, а также css-файл для таблицы:

import BootstrapTable from 'react-bootstrap-table-next'; import '../../../node_modules/react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'

Для самого простого вывода данных в таблицу необходимо определить перечень столбцов — columns и передать компоненту входные данные через реквизит data. Внашем проекте мы передаем в качестве входных данных массив vklads, используя функционал библиотеки REDUX, их наш компонент VkladList получает их как props из хранилища store с помощью функции connect() пакета react-redux. Передать входные данные можно любым другим способом через ваш сервис получения данных или даже просто объявив и заполнив массив с данными по вкладам прямо в компоненте VkladList аналогично объявлению колонок.

Список вкладов

) >; >; const mapStateToProps=()=>< return ; > const mapDispatchToProps=(dispatch)=> dispatch(vkladloaded(data)), > > export default connect(mapStateToProps,mapDispatchToProps)(withDataService(VkladList));

Запускаем проект и получаем наши данные, выведенные в таблице:

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

Теперь нужные колонки выводятся в отформатированном виде:

Предположим, мы хотим, чтобы вклады, сроки которых подходят к концу, подсвечивались. Это сделать несложно, добавив к таблице атрибут rowClasses. Значение этого атрибута — вызов написаного нами метода rowClass, в котором мы для нужных строк добавляем стили с использованем css:

Метод rowClass для строк с нужными датами использует специальный класс ‘custom-row-class’, описанный в css-файле. Метод ValueOf() для дат возвращает количество миллисекунд, прошедших с полуночи 1 января 1970 до указанной даты, поэтому для определения интервала от текущей даты + 30 дней добавляем количество миллисекунд: 30*24*60*60*1000:

rowClass = (row, rowIndex) => < const today=new Date(); const dataFinish=new Date(row['dataFinish']); if (dataFinish.valueOf()

Класс ‘custom-row-class’ в нашем css файле определим следущим образом:

И теперь строки, срок вклада которых завершен или скоро завершится, будут отображаться жирным шрифтом и подсвечиваться:

Добавляем возможность редактирования данных.

Это легко сделать, добавив атрибут cellEdit к таблице и определив его опции. Также надо не забыть импортировать компонент cellEditFactory из пакета react-bootstrap-table2-editor:

В фабрике опций редактирования cellEditFactory определим несколько атрибутов:

  • mode -способ входа в режим редактирования – в нашем случае двойной щелчок мыши.
  • blurToSave -автоматическое сохранение введенных данных при выходе из редактируемой ячейки.
  • afterSaveCell — обработка проведенного редактирования: необходимо обновить состояние компонента, в нашем случае – обновить данные в общем хранилище, используя библиотеку redux.

В методе handleChange проверяем, что значение ячейки действительно изменилось, и вызываем функцию vkladUpdated из actions, которая и передаст в reducer данные для внесения изменений в наш store. Для react проекта без redux в обработчике мы бы просто обновили state компонента.

Теперь можно редактировать значения ячеек, но, чтобы при этом не пришлось следить за форматом вводимых данных, например, для полей дат или поля валюты, можно определить специальный вид редакторов для этих полей.

Например, для поля дат мы хотим, чтобы выводился календарь для выбора нужной даты. Добавляем в описание столбцов для этих полей атрибут editor:

Теперь при двойном щелчке мыши на ячейке с датой предлагается календарь для выбора даты:

В поле выбора валюты хотелось бы вводить корректный код валюты, причем, выбирать его из списка. Делаем поле редактирования для ввода валюты выпадающим списком:

Теперь при редактировании валюты появляется нужный список для выбора:

Итак, мы научились в react-проекте выводить данные в таблицу, форматировать их вывод на экран и настраивать способы редактирования для разных типов данных с помощью компонента React Bootstrap Table2. Это только небольшой перечень опций использования компонента React Bootstrap Table2. Другие его возможности рассмотрим в следующих статьях.

Читайте также: