Как создать сетку данных, которую можно редактировать в реальном времени в React

1656628931 kak sozdat setku dannyh kotoruyu mozhno redaktirovat v realnom vremeni

Питер Мбануго

H3jO2QUplPvs3F-tG5DozHdYa4mjuEF7-CBT

Сетка данных позволяет отображать и редактировать данные. Это жизненно важная функция в большинстве управляемых данными программ.

Возможно, вы уже реализовали это в одной из своих программ React в прошлом. Возможно, вы использовали такие библиотеки, как react-bootstrap-table, react-grid или react-table. Благодаря этому вы можете добавить Datagrid в программу React. Но что, если вы хотите, чтобы изменения вносились в режиме реального времени и обновления синхронизировались на всех подключенных устройствах и их браузерах?

В этой статье я покажу вам, как построить сетку данных в реальном времени в React с помощью react-table и Hamoni Sync.

react-table — это легкая и быстрая библиотека для визуализации таблиц в React, которая поддерживает разбиение на страницы и многие другие функции.

Hamoni Sync — это служба синхронизации состояния в режиме реального времени, которая позволяет синхронизировать состояние программы в режиме реального времени. Я покажу вам, как построить сеть данных с именами и фамилиями людей.

Если вы хотите придерживаться этого, вы должны иметь некоторые знания из React и иметь следующие инструменты:

  1. NodeJS
  2. npm и npx. Если вы установили npm версии 5.2.0 или более поздней, он устанавливает npx вместе с npm.
  3. create-react-app

Создайте приложение React

Сначала мы создадим новый проект React с помощью create-react-app.

Откройте командную строку и запустите npx create-react-app realtime-react-datatable. Это запустит программу React для нас, создав новый каталог realtime-react-datatable с файлами, необходимыми для создания приложения React.

После создания программы React нам необходимо установить react-table и Hamoni Sync. Все еще в командной строке, запустите cd realtime-react-datatable перейти в каталог программы. Беги npm i react-table hamoni-sync в командной строке, чтобы установить оба пакета.

Воспроизведите Datagrid

Для рендеринга сетки данных мы будем использовать компонент react-table. Откройте файл src/App.js и обновите его с помощью кода ниже:

import React, { Component } from "react";import logo from "./logo.svg";import "./App.css";// Import React Tableimport ReactTable from "react-table";import "react-table/react-table.css";// Import Hamoni Syncimport Hamoni from "hamoni-sync";
class App extends Component {  constructor() {    super();    this.state = {      data: [],      firstName: "",      lastName: ""    };  }
  handleChange = event => {    if (event.target.name === "firstName")      this.setState({ firstName: event.target.value });    if (event.target.name === "lastName")      this.setState({ lastName: event.target.value });  };
  handleSubmit = event => {    event.preventDefault();  };
  renderEditable = cellInfo => {    return (      <div        style={{ backgroundColor: "#fafafa" }}        contentEditable        suppressContentEditableWarning        onBlur={e => {          const data = [...this.state.data];          data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;          this.setState({ data });        }}        dangerouslySetInnerHTML={{          __html: this.state.data[cellInfo.index][cellInfo.column.id]        }}      />    );  };
  render() {    const { data } = this.state;
    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />          <h1 className="App-title">Welcome to React</h1>        </header>        <p className="App-intro">          <form onSubmit={this.handleSubmit}>            <h3>Add new record</h3>            <label>              FirstName:              <input                type="text"                name="firstName"                value={this.state.firstName}                onChange={this.handleChange}              />            </label>{" "}            <label>              LastName:              <input                type="text"                name="lastName"                value={this.state.lastName}                onChange={this.handleChange}              />            </label> 
            <input type="submit" value="Add" />          </form>        </p>        <div>          <ReactTable            data={data}            columns={[              {                Header: "First Name",                accessor: "firstName",                Cell: this.renderEditable              },              {                Header: "Last Name",                accessor: "lastName",                Cell: this.renderEditable              },              {                Header: "Full Name",                id: "full",                accessor: d => (                  <div                    dangerouslySetInnerHTML={{                      __html: d.firstName + " " + d.lastName                    }}                  />                )              }            ]}            defaultPageSize={10}            className="-striped -highlight"          />        </div>      </div>    );  }}
export default App;

Приведенный выше код отображает форму и компонент редактируемой таблицы реакции. <ReactTable /> отображает компонент witч data, cколонны, and defaultPaреквизит geSize. The data props содержит данные для отображения, and columns props для определения столбца. The acсобственно цесорty in columns props указывает свойство, содержащее значение, которое будет отображено для этого column. Cell: this.renderEdправильноty in columns props сообщает react-table, что столбец можно редактировать. Другая функцияions (handleподmit & handleИзменение) позволяет получить новые данные из формы на странице.

Добавить Hamoni Sync

Данные для сетки данных будут получены и обновлены в режиме реального времени с помощью Hamoni Sync. Мы уже импортировали библиотеку Hamoni на строке 18 in App.js;

import Hamoni from "hamoni-sync";

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

  1. Зарегистрируйтесь и войдите на информационную панель Hamoni
  2. Введите имя программы в текстовое поле и нажмите кнопку Создать. Это должно создать программу и отобразить ее в списке приложений.
  3. Нажмите кнопку «Показать идентификатор аккаунта», чтобы увидеть идентификатор аккаунта.
JcOI2Oer-YfeEh3ITndyiaF98c1GIRRUQoeN

Добавьте следующий код в App.js для инициализации и подключения к серверу Hamoni Sync.

componentDidMount() {    let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");
    hamoni      .connect()      .then(() =>; {
      })      .catch(console.log);  }

Приведенный выше код подключит клиентское устройство или браузер к серверу Hamoni Sync. Скопируйте учетную запись и идентификатор программы с информационной панели и замените соответствующим заполнителем строки.

Добавьте следующее к функции в then() блок, который будет выполнен, когда он успешно соединится с сервером:

hamoni    .get("datagrid")    .then(listPrimitive => {      this.listPrimitive = listPrimitive;
      this.setState({        data: [...listPrimitive.getAll()]      });
      listPrimitive.onItemAdded(item => {        this.setState({ data: [...this.state.data, item.value] });      });
      listPrimitive.onItemUpdated(item => {        let data = [        ...this.state.data.slice(0, item.index),        item.value,        ...this.state.data.slice(item.index + 1)        ];
        this.setState({ data: data });      });
      listPrimitive.onSync(data => {        this.setState({ data: data });      });    })    .catch(console.log);

Код выше вызывает hamoni.get("datagrid") чтобы получить данные, с datagrid как название состояния программы на Hamoni Sync. Hamoni Sync позволяет сохранять 3 вида состояния, которые называются примитивами Sync. Они есть:

  1. Примитивное значение: Этот вид состояния содержит простую информацию, представленную такими типами данных, как строка, логические значения или числа. Он лучше подходит для таких случаев, как количество непрочитанных сообщений, переключение и т.д.
  2. Примитивный объект: состояние объекта представляет состояние, которое можно моделировать как объект JavaScript. Примером использования может служить сохранение счета игры.
  3. Список примитивных: Здесь находится список объектов состояния. Объект состояния – это объект JavaScript. Вы можете обновить элемент на основе его индекса в списке.

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

В строке 36 мы использовали getAll() метод получения данных и установка состояния для компонента React. А также методы onItemAdded() и onItemUpdated() используются для получения обновлений при добавлении или обновлении элемента. The onSync() Метод полезен в сценарии, когда устройство или браузер теряет соединение, а когда он повторно подключается, он пытается получить последнее состояние с сервера и обновить локальное состояние, если оно есть.

Добавить и обновить элементы

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

handleSubmit = event => {    this.listPrimitive.push({        firstName: this.state.firstName,        lastName: this.state.lastName    });    this.setState({ firstName: "", lastName: "" });    event.preventDefault();};

Этот код получает имя и фамилию из формы и добавляет их к примитиву состояния списка на Hamoni Sync, вызывая push() метод. Это приведет к активации onItemAdded() метод.

Чтобы обновлять элементы, когда они редактируются в сетке данных, мы обновим функцию, переданную в onBlur опоры в строке 84 следующим образом:

onBlur={e => {    let row = this.state.data[cellInfo.index];    row[cellInfo.column.id] = e.target.innerHTML;    this.listPrimitive.update(cellInfo.index, row);}}

Этот код обновляет элемент по индексу, полученному из cellInfo объект. Чтобы обновить примечание состояния списка в Hamoni Sync, вы вызываете update()метод с индексом элемента и значением обновления. The renderEditable Теперь метод после последнего изменения должен выглядеть так:

renderEditable = cellInfo => {    return (      <div        style={{ backgroundColor: "#fafafa" }}        contentEditable        suppressContentEditableWarning        onBlur={e => {          let row = this.state.data[cellInfo.index];          row[cellInfo.column.id] = e.target.innerHTML;          this.listPrimitive.update(cellInfo.index, row);        }}        dangerouslySetInnerHTML={{          __html: this.state.data[cellInfo.index][cellInfo.column.id]        }}      />    );  };

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

Нам нужно создать состояние и предоставить ему некоторые данные о Hamoni Sync. Добавьте новый файл seed.js в корне вашего рабочего каталога и добавьте в него следующий код:

const Hamoni = require("hamoni-sync");
let hamoni = new Hamoni("AccountID", "APP_ID");
hamoni  .connect()  .then(response => {    hamoni      .createList("datagrid", [        { firstName: "James", lastName: "Darwin" },        { firstName: "Jimmy", lastName: "August" }      ])      .then(() => console.log("create success"))      .catch(console.log);  })  .catch(console.log);

Это создаст примитивное состояние списка на Hamoni Sync с именем datagrid. Замените AccountID и APP_ID строка с вашей учетной записью и идентификатором программы. Откройте командную строку и запустите node seed.js. Это должно удаться и распечатать create success сообщения.

Теперь мы можем запустить приложение React и увидеть наше приложение в действии! Выполните команду npm start в командной строке и программа откроется в вашем браузере по умолчанию.

gKCOU6o-Pi075R0WC-czpeuKbAyoOr7m7dCD

Ура! У нас есть сеть данных для редактирования в режиме реального времени с разбивкой на страницы!

Вывод

Мы создали сетку данных в реальном времени в React, используя таблицу реакции и Hamoni Sync. С таблицей реакций, питающей сетку данных, а Hamoni Sync обрабатывает состояние сетки данных. Все это было достигнуто с помощью нескольких строк кода и меньших усилий по разработке логики состояния в реальном времени. Вы можете получить готовое приложение того, что мы создали на GitHub. Можно отслеживать, какая ячейка редактируется, или заблокировать ячейки, которые сейчас редактируются другим пользователем. Я оставлю это как начальный хак для вас.

Не стесняйтесь оставить комментарий, если что-то непонятно или возникнут проблемы при попытке добавить блокировку или выделить редактируемые ячейки.

Счастливого кодирования?

Добавить комментарий

Ваш адрес email не будет опубликован.