React-da düzəldilə bilən bir real vaxt datagrid yaradın

Veriləri görmək və idarə etmək üçün bir datagrid istifadə edə bilərsiniz. Bu, əksər məlumatlara əsaslanan tətbiqetmələrdə vacib bir funksiyadır.

Bunu keçmişdə React tətbiqetmələrinizdən birində tətbiq etmiş ola bilərsiniz. Bəlkə də "Reak-Bootstrap-Table", "React-Grid" və ya "React-Table" kimi kitabxanalardan istifadə etmisiniz. Bunları React tətbiqetməyinizə bir datagrid əlavə etmək üçün istifadə edə bilərsiniz. Bəs dəyişikliklərin real vaxtda aparılmasını və yenilənmələrin bütün bağlı cihazlarda və brauzerlərdə sinxronlaşdırılmasını istəyirsinizsə nə edərsiniz?

Bu yazıda sizə React-da real vaxt datagrid yaratmaq üçün React-table və Hamoni Sync-dən necə istifadə edəcəyinizi göstərəcəyəm.

react-table, React-da masaların göstərilməsi üçün yığcam və sürətli bir kitabxanadır. Səhifələməni və bir çox digər funksiyaları dəstəkləyir.

Hamoni Sync, tətbiq statusunuzu real vaxtda sinxronizasiya etməyə imkan verən real vaxt vəziyyəti sinxronizasiya xidmətidir. Sizə insanların ad və soyadlarının bir məlumat şəbəkəsini necə yaradacağınızı göstərəcəyəm.

Əgər iştirak etmək istəyirsinizsə, React haqqında bir az məlumatınız olmalı və aşağıdakı alətləri quraşdırmalısınız:

  1. NodeJS
  2. npm & npx. Npm 5.2.0 və ya daha yüksək versiyasını quraşdırmısınızsa, npx npm ilə birlikdə quraşdırılacaqdır.
  3. Reaktiv Tətbiq Yaradın

Reaktiv tətbiqetmə yaradın

Əvvəlcə create-react-app ilə yeni bir React layihəsi hazırlayırıq.

Komanda xəttini açın və npx create-react-app realtime-react-datatable başlayın. Bu, bir React tətbiqi qurmaq üçün lazımlı sənədlərlə real vaxtda yenidən aktivləşdirilə bilən yeni bir qovluq yaradaraq bir React tətbiqetməsini işə salacaqdır.

React tətbiqi yaradıldıqdan sonra React cədvəlini və Hamoni Sync'i quraşdırmalıyıq. Komanda xəttində tətbiq üçün qovluğu dəyişdirmək üçün cd realtime-react-datatable əmrini işə salın. Hər iki paketi də quraşdırmaq üçün əmr sətrindən npm i react-table hamoni-sync-i çalıştırın.

Datagrid göstərin

Datagrid-i göstərmək üçün React Table komponentindən istifadə edəcəyik. Src / App.js faylını açın və aşağıdakı kodla yeniləyin:

idxal React, {Component} "reaksiya" dən; "./Logo.svg" saytından loqotip idxal edin; idxal "./App.css"; // Reaksiya cədvəlini idxal et "Reaktiv cədvəldən" Reaktiv Cədvəli idxal et; idxal "react-table / react-table.css"; // Hamoni Sync'i import edin "hamoni-sync" dən Hamoni import edin;
Class tətbiqi {constructor () {super () komponentini genişləndirir; this.state = {data: [], ad: "", soyad: ""}; }
handleChange = event => {if (event.target.name === "firstName") this.setState ({firstName: event.target.value}); əgər (event.target.name === "soyadı") this.setState ({lastName: event.target.value}); };
handleSubmit = hadisə => {event.preventDefault (); };
renderEditable = cellInfo => {return ( {const data = [... this.state.data]; məlumat [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;
Qayıt ( React-ə xoş gəlmisiniz Yeni bir qeyd əlavə edin   
( )}]} defaultPageSize = {10} className = "- zolaqlı işarələmə" /> ); }}
Standart tətbiqin ixracı;

Yuxarıda göstərilən kod bir forma və tənzimlənə bilən cavab masası komponentini təqdim edir. məlumat, sütun və defaultPageSize rekvizitləri olan bir komponent təqdim edir. Məlumat dəstəyi göstəriləcək məlumatları və sütun tərifi üçün sütun dəstəklərini ehtiva edir. Sütun rekvizitlərindəki əmlaka giriş, bu sütun üçün göstəriləcək dəyəri özündə birləşdirir. Cell: sütun başlıqlarında this.renderEditable xassəsi cavab cədvəlində sütunun düzəldilə biləcəyini bildirir. Digər funksiyalarla (handleSubmit & handleChange) səhifədəki formadan yeni məlumatlar daxil edə bilərsiniz.

Hamoni Sync əlavə edin

Datagrid üçün məlumatlar Hamoni Sync istifadə edərək real vaxtda əldə edilir və yenilənir. Artıq App.js.-dəki 18-ci sətirdə Hamoni kitabxanasını gətirmişik.

Hamoni "hamoni-sync" dən idxal edin;

Onu işə salmalı və Hamoni serverinə qoşulmalıyıq. Bunun üçün bir hesaba və bir tətbiq kimliyinə ehtiyacımız var. Hamoni-də bir proqram yaratmaq üçün bu addımları izləyin.

  1. Qeydiyyatdan keçin və Hamoni panelinə daxil olun
  2. Mətn qutusuna üstünlük verdiyiniz proqram adını daxil edin və Yarat düyməsini basın. Bu tətbiqetməni yaratmalı və tətbiq siyahısı siyahısı hissəsində görünməlidir.
  3. Hesab ID-yə baxmaq üçün Account ID göstər düyməsini vurun.

Hamoni Sync serverini işə salmaq və əlaqə qurmaq üçün aşağıdakı kodu App.js-ə əlavə edin.

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

Yuxarıda göstərilən kodla müştəri cihazı və ya brauzer Hamoni Sync serverinə qoşulur. Hesab panelinizi və tətbiq identifikatorunuzu paneldən kopyalayın və hər birini simli yer tutucu ilə əvəz edin.

Serverlə əlaqə uğurlu olduqda icra ediləcək then () blokundakı funksiyaya aşağıdakıları əlavə edin:

hamoni .get ("datagrid"). sonra (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);

Yuxarıdakı kod, məlumat almaq üçün hamoni.get ("datagrid") çağırır, burada datagrid Hamoni Sync-də tətbiq vəziyyətinin adıdır. Hamoni Sync, sinxronizasiya primitivləri adlanan üç növ status saxlamağa imkan verir. Sən:

  1. Əsas dəyər: Bu status növü simli, mantıksal dəyər və ya rəqəmlər kimi məlumat növləri ilə təmsil olunan sadə məlumatları ehtiva edir. Oxunmamış mesajlar, dəyişdirmə və s. Kimi hallar üçün ən yaxşı şəkildə işləyir.
  2. Nesne-ibtidai: Nesne statusu, JavaScript obyekti kimi modellenebilen statusu temsil edir. Nümunə istifadə oyun nəticəsini saxlamaq ola bilər.
  3. İbtidai siyahı: Vəziyyət obyektlərinin siyahısını ehtiva edir. Status obyekti JavaScript obyektidir. Siyahıdakı bir elementi indeksinə əsasən yeniləyə bilərsiniz.

Vəziyyət mövcuddursa, həll edilir və ibtidai status obyekti ilə vəd verir. Bu obyekt bizə vəziyyəti yeniləmək və real vaxt vəziyyəti yeniləmələrini əldə etmək metodlarına giriş imkanı verir.

36-cı sətirdə məlumat almaq və React komponentinin vəziyyətini təyin etmək üçün getAll () metodundan istifadə etdik. OnItemAdded () və onItemUpdated () metodları da bir maddə əlavə edildikdə və ya yeniləndiyində yeniləmələr əldə etmək üçün istifadə olunur. OnSync () metodu bir cihazın və ya brauzerin ayrıldığı bir ssenaridə faydalıdır və yenidən qoşulduqda serverdən ən son vəziyyəti almağa və varsa yerli vəziyyəti yeniləməyə çalışır.

Maddələr əlavə edin və yeniləyin

Əvvəlki hissədə datagrid üçün məlumat əldə edə bilərik və bir maddə əlavə edildikdə və ya yeniləndikdə vəziyyəti yeniləyə bilərik. Yeni elementlər əlavə etmək üçün kod əlavə edək və bir sütun düzəldildikdə bir elementi yeniləyək. Aşağıdakı kodu handleSubmit metoduna əlavə edin:

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

Bu kod formadan ad və soyad alır və push () metodunu çağıraraq Hamoni Sync-in siyahı statusu primitivinə əlavə edir. Bu onItemAdded () metodunu işə salır.

Datagrid-də düzəldildiyi kimi maddələri yeniləmək üçün 84-cü sətirdə onBlur rekvizitlərinə ötürülən funksiyanı aşağıdakı kimi yeniləyirik:

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

Bu kod, elementi cellInfo obyektindən əldə edilmiş indeksdə yeniləyir. Hamoni Sync-də bir siyahı vəziyyəti primitivini yeniləmək üçün elementin indeksi və güncəllənəcək dəyər ilə update () metodunu çağırın. RenderEditable metodu son dəyişiklikdən sonra belə olmalıdır:

renderEditable = cellInfo => {return ( {let row = this.state.data [cellInfo.index]; sıra [cellInfo.column.id] = e.target.innerHTML; this.listPrimitive.update (cellInfo.index, sıra); }} dangerouslySetInnerHTML = {{__html: this.state.data [cellInfo.index] [cellInfo.column.id]}} />); };

Bu nöqtədə, datagriddə göstərilən ilk məlumatlar xaricində tətbiqetməni çalışdırmaq üçün lazım olan hər şeyə sahibik.

Vəziyyəti yaratmalıyıq və Hamoni Sync haqqında bəzi məlumatlar verməliyik. İş qovluğunuzun kökünə yeni bir seed.js faylı əlavə edin və aşağıdakı kodu əlavə edin:

const Hamoni = tələb ("hamoni-sync");
let hamoni = yeni Hamoni ("AccountID", "APP_ID");
hamoni .verbinden (). sonra (cavab => {hamoni .createList ("datagrid", [{ad: "James", soyad: "Darwin"}, {ad: "Jimmy", soyad: "August"}]) . sonra (() => console.log ("Uğur Yarat")) .catch (console.log);}) .catch (console.log);

Bu, Hamoni Sync-də datagrid adlı ibtidai siyahı vəziyyəti yaradır. AccountID və APP_ID dizələrini hesabınız və tətbiq kimliyinizlə əvəz edin. Komanda xəttini açın və seed.js düyünü çalıştırın. Bu uğurlu olmalı və bir uğur mesajı göstərməlidir.

İndi React tətbiqetməsini işə sala və tətbiqimizi işdə görə bilərik! Komanda xəttindən npm start əmrini işə salın və tətbiq standart brauzerinizdə açılacaqdır.

Uğur! Səhifələşdirmə ilə real vaxtda tənzimlənə bilən bir datagrid var!

Nəticə

React-table və Hamoni Sync ilə React-da real vaxt datagrid yaratdıq. Datagrid React-Table-Powering və Hamoni Sync prosesi ilə Datagrid statusu. Bütün bunlar yalnız bir neçə kod sətri və real vaxt vəziyyət məntiqi dizaynında daha az səylə əldə edildi. Bitmiş tətbiqi GitHub-da qurduğumuzdan əldə edə bilərsiniz. Hazırda hansı hüceyrənin düzəldildiyini izləyə və ya başqa bir istifadəçi tərəfindən düzəldilən hüceyrələri kilidləyə bilərsiniz. Bunu sizin üçün bir həftə sonu hack olaraq buraxacağam.

Hal-hazırda düzəlişdə olan bir kilid əlavə etmək və ya işıqlandırmaqla əlaqəli hər hansı bir qarışıqlıq və ya problem varsa, hər zaman bir şərh yaza bilərsiniz.

Xoşbəxt kodlama