Kuidas luua reaalajas redigeeritav Datagrid reaktoris?

Datagrid võimaldab teil andmeid kuvada ja redigeerida. See on oluline funktsioon enamikus andmepõhistes rakendustes.

Võib-olla olete selle juba ühes oma Reaxi rakenduses rakendanud. Võib-olla kasutasite selliseid raamatukogusid nagu reageerimise-alglaadimise tabel, reageerimise võrk või reageerimise tabel. Nendega saate rakenduse React lisada Datagridi. Aga mis siis, kui soovite, et muudatused tehtaks reaalajas ja värskendused sünkroonitaks kõigi ühendatud seadmete ja nende brauseritega?

Selles artiklis näitan teile, kuidas luua reaalajas andmevõrk Reaktis, kasutades reaktustabelit ja Hamoni Synci.

react-table on kerge ja kiire teek tabelite renderdamiseks Reaktis ning see toetab lehekülgi ja palju muid funktsioone.

Hamoni Sync on reaalajas oleku sünkroonimisteenus, mis võimaldab teil rakenduse olekut reaalajas sünkroonida. Ma näitan teile, kuidas luua andme- ja eesnimi inimeste ees- ja perekonnanimedega.

Kui soovite kaasa minna, peaks teil olema Reacti kohta teadmisi ja installitud järgmised tööriistad:

  1. SõlmJS
  2. npm ja npx. Kui olete installinud npm versiooni 5.2.0 või uuema, installib see npm lisaks npm.
  3. loo-reageeri-rakendus

Looge rakendus React

Esmalt loome uue projekti Reakt, kasutades rakendust loo-reageeri.

Avage käsurida ja käivitage npx luua-reageerida-rakendus reaalajas-reageerida-andmetabel. See käivitab meie jaoks Reacti rakenduse, luues uue kataloogi reaalajas reageerimise andmestik koos failidega, mis on vajalikud Reacti rakenduse ehitamiseks.

Loodud rakenduse React abil peame installima react-table ja Hamoni Sync. Ikka käsuridal käivitage rakenduse kataloogi lülitamiseks cd reaalajas reageerimise andmetabel. Mõlema paketi installimiseks käivitage käsuribal npm i react-table hamoni-sync.

Renderdage Datagrid

Datagrid'i renderdamiseks kasutame reaktitabeli komponenti. Avage fail src / App.js ja värskendage seda alloleva koodiga:

impordi Reakt, {komponent} rakendusest "reageerima";
impordi logo saidilt "./logo.svg";
import "./App.css";
// Impordi reageerimise tabel
importida ReactTable rakendusest "react-table";
import "reageeri-tabel / reageeri-tabel.css";
// Impordi Hamoni Sync
importida Hamoni rakendusest "hamoni-sync";
klassi rakendus laiendab komponenti {
  ehitaja () {
    Super();
    see.riik = {
      andmed: [],
      eesnimi: "",
      perekonnanimi: ""
    };
  }
  handleChange = event => {
    if (sündmus.target.nimi === "eesnimi")
      this.setState ({eesnimi: event.target.value});
    if (sündmus.target.nimi === "perekonnanimi")
      this.setState ({perekonnanimi: event.target.value});
  };
  handleSubmit = event => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    tagasi (
      
{           const data = [... see.state.data];           andmed [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML;           this.setState ({andmed});         }}         ohtlikultSetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };
  renderdama () {
    const {data} = see.riik;
    tagasi (
      
        
          logo           

Tere tulemast reageerima

        
        

                       

Lisage uus kirje

                           Eesnimi:                             {""}                            Perekonnanimi:                            
            
          
        

        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- triibuline-esiletõstmine"           />         
      
    );   } }
eksport vaikimisi rakendus;

Ülaltoodud kood muudab vormi ja redigeeritava reageerimistabeli komponendi. renderdab komponendi andmete, veergude ja defaultPageSize rekvisiitidega. Andme rekvisiidid hoiavad andmeid kuvamiseks ja veerud rekvisiidid veeru määratluse jaoks. Veergude rekvisiitide atribuutide omadus näitab atribuuti, millel on selle veeru kuvatav väärtus. Lahter: this.renderEditable omadus veergude rekvisiidid ütleb react-table, et veerg on redigeeritav. Muud funktsioonid (handleSubmit & handleChange) võimaldavad lehel olevalt vormilt saada uusi andmeid.

Lisage Hamoni Sync

Andmevõrgu andmed hangitakse ja värskendatakse Hamoni Synci abil reaalajas. Oleme juba importinud Hamoni raamatukogu real 18 App.js;

importida Hamoni rakendusest "hamoni-sync";

Peame selle lähtestama ja Hamoni serveriga ühenduse looma. Selleks vajame kontot ja rakenduse ID-d. Rakenduse loomiseks Hamonis järgige neid samme.

  1. Registreeruge ja logige sisse Hamoni armatuurlauale
  2. Sisestage tekstiväljale soovitud rakenduse nimi ja klõpsake nuppu Loo. See peaks rakenduse looma ja selle rakenduste loendi jaotises kuvama.
  3. Oma konto ID kuvamiseks klõpsake nuppu „Kuva konto ID”.

Hamoni Synci serveri lähtestamiseks ja ühenduse loomiseks lisage järgmine kood App.js-i.

komponentDidMount () {
    lase hamoni = new Hamoni ("ACCOUNT_ID", "APP_ID");
    hamoni
      .connect ()
      . seejärel (() => {
      })
      .catch (console.log);
  }

Ülaltoodud kood ühendab kliendi seadme või brauseri Hamoni Synci serveriga. Kopeerige oma konto ja rakenduse ID armatuurlaualt ja asendage need vastavalt stringi kohahoidjaga.

Lisage funktsioonile seejärel () plokis järgmine funktsioon, mis tuleb täita siis, kui see ühendub serveriga edukalt:

hamoni
    .get ("datagrid")
    . seejärel (listPrimitive => {
      this.listPrimitive = listPrimitive;
      this.setState ({
        andmed: [... listPrimitive.getAll ()]
      });
      listPrimitive.onItemAdded (item => {
        this.setState ({andmed: [... see.riigi.andmed, üksuse.väärtus]});
      });
      listPrimitive.onItemUpdated (item => {
        las andmed = [
        ... see.riigi.info.lõige (0, üksuse.indeks),
        item.value,
        ... see.riigi.info.lõige (üksus.index + 1)
        ];
        this.setState ({andmed: andmed});
      });
      listPrimitive.onSync (andmed => {
        this.setState ({andmed: andmed});
      });
    })
    .catch (console.log);

Ülaltoodud kood kutsub andmete saamiseks üles hamoni.get ("datagrid"), Hamoni Synci rakenduse oleku nimeks Datagrid. Hamoni Sync võimaldab teil salvestada 3 tüüpi olekut, mida nimetatakse sünkroonimise primitiivideks. Nemad on:

  1. Väärtuspõhimõte: seda tüüpi olekus on lihtne teave, mis on esitatud andmetüüpidega, nagu string, tõeväärtus või numbrid. See sobib kõige paremini selliste juhtumite korral nagu lugemata sõnumite arv, lülitamised jms.
  2. Objekti primitiiv: objekti olek tähistab olekuid, mida saab modelleerida JavaScripti objektina. Näitena võib tuua mängu tulemuse salvestamise.
  3. Algloend: see sisaldab olekukobjektide loendit. Riigiobjekt on JavaScripti objekt. Üksust saate värskendada selle loendis sisalduva indeksi alusel.

Kui olek on saadaval, lahendab ta ja lubab riigiprimatiivse objektiga lubaduse. See objekt annab meile juurdepääsu meetoditele oleku värskendamiseks ja olekuvärskenduste saamiseks reaalajas.

Liinil 36 kasutasime andmete saamiseks ja reaktori komponendi oleku määramiseks meetodit getAll (). Samuti kasutatakse üksuste lisamisel või värskendamisel värskenduste saamiseks meetodeid onItemAdded () ja onItemUpdated (). OnSync () -meetod on kasulik stsenaariumi korral, kus seade või brauser kaotab ühenduse ja kui see uuesti luuakse, proovib see serverist uusimat olekut saada ja värskendab kohalikku olekut, kui see on olemas.

Üksuste lisamine ja värskendamine

Eelmisest jaotisest on meil võimalik hankida andmeid datagridi kohta ja värskendada olekut, kui üksus lisatakse või värskendatakse. Lisage kood uute üksuste lisamiseks ja üksuse värskendamiseks, kui veergu on redigeeritud. Lisage järgmine kood käepideme esitamise meetodile:

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

See kood saab vormist ees- ja perekonnanime ning lisab selle loendi oleku primitiivseks Hamoni Sync-is, kutsudes meetodit push (). See käivitab onItemAdded () meetodi.

Üksuste värskendamiseks pärast nende muutmist datagridis värskendame onBluri rekvisiitidele real 84 antud funktsiooni järgmiselt:

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

See kood värskendab üksust elemendi cellInfo alla laaditud indeksis. Loendi oleku primitiivse värskendamiseks rakenduses Hamoni Sync helistate värskendusmeetodi () meetodile koos üksuse indeksi ja värskendatava väärtusega. RenderEditable meetod peaks nüüd pärast viimast muudatust välja nägema selline:

renderEditable = cellInfo => {
    tagasi (
      
{           lase rida = this.state.data [cellInfo.index];           rida [cellInfo.column.id] = e.target.innerHTML;           this.listPrimitive.update (cellInfo.index, rida);         }}         ohtlikultSetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };

Praegu on meil peaaegu kõik rakenduse käitamiseks vajalik, välja arvatud lähteandmed, mis kuvatakse datagridis.

Peame looma riigi ja andma sellele mingid andmed Hamoni Synci kohta. Lisage töötava kataloogi juure uus fail seed.js ja lisage sellele järgmine kood:

const Hamoni = nõuda ("hamoni-sync");
lase hamoni = new Hamoni ("AccountID", "APP_ID");
hamoni
  .connect ()
  . seejärel (vastus => {
    hamoni
      .createList ("datagrid", [
        {eesnimi: "James", perekonnanimi: "Darwin"},
        {eesnimi: "Jimmy", perekonnanimi: "august"}
      ])
      . seejärel (() => console.log ("looge edu"))
      .catch (console.log);
  })
  .catch (console.log);

Sellega luuakse Hamoni Synci loendis primitiivne olek koos nimega datagrid. Asendage stringid AccountID ja APP_ID oma konto ja rakenduse ID-ga. Avage käsurida ja käivitage sõlm seed.js. See peaks õnnestuma ja välja prinditud loob eduteate.

Nüüd saame käivitada rakenduse React ja näha, kuidas see rakendus töötab! Käivitage käsurida käsul npm start ja see avab rakenduse teie vaikebrauseris.

Hooray! Meil on reaalajas redigeeritav andmesidevõrk koos lehekülgedega!

Järeldus

Oleme reaktoris ehitanud reaalajas andmevõrgu, kasutades react-table ja Hamoni Sync. Reaktitabeli toites andmesidevõrku ja Hamoni Synci kasutades andmevõrgu olekut. See kõik saavutati mõne koodiridaga ja reaalajas olekute loogika kujundamiseks vähem vaeva nähes. Saate valmis rakenduse selle kohta, mille me GitHubil üles ehitasime. Võimalik on jälgida, millist lahtrit redigeeritakse, või lukustada lahtrid, mida praegu redigeerib teine ​​kasutaja. Jätan selle teile nädalavahetuse häkiks.

Kommenteerige julgelt, kui midagi pole selge või kui teil on probleeme redigeeritavate lahtrite lisamiseks või esiletõstmiseks probleemidega.

Õnnelik kodeerimine