de Peter Mbanugo

Cum să construiți un Datagrid editabil în timp real în React

Cum sa construiti un Datagrid editabil in timp real in

O rețea de date vă permite să afișați și să editați date. Aceasta este o caracteristică vitală în majoritatea aplicațiilor bazate pe date.

Este posibil să fi implementat acest lucru în una dintre aplicațiile dvs. React în trecut. Poate ai folosit biblioteci de genul react-bootstrap-table, react-grid, sau react-table. Cu acestea, puteți adăuga un Datagrid în aplicația dvs. React. Dar dacă doriți ca modificările să se facă în timp real și actualizările sincronizate pe toate dispozitivele conectate și browserele lor?

În acest articol, vă voi arăta cum să construiți o grilă de date în timp real în React folosind react-table și Hamoni Sync.

react-table este o bibliotecă ușoară și rapidă pentru redarea tabelelor în React și acceptă paginarea și multe alte caracteristici.

Hamoni Sync este un serviciu de sincronizare a stării în timp real care vă permite să sincronizați starea aplicației în timp real. Vă voi arăta cum să construiți o rețea de date cu numele și prenumele oamenilor.

Dacă doriți să continuați, ar trebui să aveți cunoștințe despre React și să aveți instalate următoarele instrumente:

  1. NodeJS
  2. npm & npx. Dacă ați instalat npm versiunea 5.2.0 sau mai mare, acesta instalează npx alături de npm.
  3. creați-reacționați-aplicație

Creați aplicația React

Mai întâi vom crea un nou proiect React folosind create-react-app.

Deschideți linia de comandă și rulați npx create-react-app realtime-react-datatable. Aceasta va porni o aplicație React pentru noi prin crearea unui nou director realtime-react-datatable cu fișierele necesare pentru a construi o aplicație React.

Cu aplicația React creată, trebuie să instalăm react-table și Hamoni Sync. Încă pe linia de comandă, rulați cd realtime-react-datatable pentru a comuta la directorul aplicației. Alerga npm i react-table hamoni-sync în linia de comandă pentru a instala ambele pachete.

Redați Datagrid

Pentru a reda grila de date, vom folosi componenta react-table. Deschideți fișierul src/App.js și actualizați-l cu codul de mai jos:

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;

Codul de mai sus redă un formular și o componentă editabilă a tabelului de reacție. <ReactTable /> redă o componentă with data, columns, and defaultParecuzită geSize. ThAccesoriile de date conțin datele de afișat, and columns recuzită pentru definiția coloanei. The accesor propriu-zisty in columns props indică proprietatea care deține valoarea care trebuie afișată pentru acea column. Cell: this.renderEditable propriu-zisty in columns props spune react-table că coloana este editabilă. Cealaltă funcțieions (handleSubmit & handleModificare) permite obținerea de noi introduceri de date din formularul de pe pagină.

Adăugați Hamoni Sync

Datele pentru grila de date vor fi recuperate și actualizate în timp real folosind Hamoni Sync. Am importat deja biblioteca Hamoni pe linia 18 în App.js;

import Hamoni from "hamoni-sync";

Trebuie să-l inițializăm și să ne conectăm la serverul Hamoni. Pentru a face acest lucru avem nevoie de un cont și un ID de aplicație. Urmați acești pași pentru a crea o aplicație în Hamoni.

  1. Înregistrați-vă și conectați-vă la Hamoni bord
  2. Introduceți numele aplicației preferate în câmpul de text și faceți clic pe butonul de creare. Aceasta ar trebui să creeze aplicația și să o afișeze în secțiunea listă de aplicații.
  3. Faceți clic pe butonul „Afișare ID cont” pentru a vedea ID-ul contului.
Cum sa construiti un Datagrid editabil in timp real in

Adăugați următorul cod la App.js pentru a inițializa și a vă conecta la serverul Hamoni Sync.

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

Codul de mai sus va conecta dispozitivul client sau browserul la serverul Hamoni Sync. Copiați contul și ID-ul aplicației din tabloul de bord și înlocuiți-le cu substituentul șirului respectiv.

Adăugați următoarele la funcția din then() bloc, care trebuie executat atunci când se conectează cu succes la server:

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);

Codul de mai sus apelează hamoni.get("datagrid") pentru a obține datele, cu datagrid ca nume al stării aplicației pe Hamoni Sync. Hamoni Sync vă permite să stocați 3 tipuri de stări denumite primitive de sincronizare. Sunt:

  1. Valoare Primitivă: Acest tip de stare conține informații simple reprezentate cu tipuri de date precum șir, boolean sau numere. Este cel mai potrivit pentru cazuri precum numărul de mesaje necitite, comutarea etc.
  2. Obiect Primitiv: Starea obiectului reprezintă stări care pot fi modelate ca obiect JavaScript. Un exemplu de utilizare ar putea fi stocarea scorului unui joc.
  3. Lista Primitive: Acesta conține o listă de obiecte de stare. Un obiect de stare este un obiect JavaScript. Puteți actualiza un element pe baza indexului acestuia din listă.

Dacă statul este disponibil, acesta rezolvă și returnează o promisiune cu obiectul de stare primitiv. Acest obiect ne oferă acces la metode de actualizare a stării și obținerea actualizărilor de stare în timp real.

Pe linia 36 am folosit getAll() metoda pentru a obține date și a seta starea pentru componenta React. De asemenea, metodele onItemAdded() și onItemUpdated() sunt folosite pentru a obține actualizări atunci când un element este adăugat sau actualizat. onSync() metoda este utilă într-un scenariu în care un dispozitiv sau un browser își pierde conexiunea și, atunci când se reconectează, încearcă să obțină cea mai recentă stare de la server și să actualizeze starea locală, dacă există.

Adăugați și actualizați elemente

Din secțiunea anterioară, putem obține datele pentru grila de date și actualiza starea la adăugarea sau actualizarea unui element. Să adăugăm cod pentru a adăuga elemente noi și să actualizăm un articol atunci când o coloană a fost editată. Adăugați următorul cod la handleSubmit metodă:

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

Acest cod primește numele și prenumele din formular și îl adaugă la primitivul de stare listă de pe Hamoni Sync apelând push() metodă. Acest lucru va declanșa onItemAdded() metodă.

Pentru a actualiza elementele pe măsură ce sunt editate în grila de date, vom actualiza funcția transmisă către onBlur recuzită pe linia 84 după cum urmează:

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

Acest cod actualizează elementul de la indexul recuperat din cellInfo obiect. Pentru a actualiza o primitivă de stare a listei în Hamoni Sync, apelați la update()metoda cu indexul articolului și valoarea de actualizat. renderEditable metoda ar trebui să arate acum după ultima modificare:

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]        }}      />    );  };

În acest moment avem aproape tot ce este necesar pentru a rula aplicația, cu excepția datelor inițiale care vor fi redate pe grila de date.

Trebuie să creăm statul și să-i oferim niște date despre Hamoni Sync. Adăugați un fișier nou seed.js la rădăcina directorului dvs. de lucru și adăugați la acesta următorul cod:

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);

Aceasta va crea o listă de stare primitivă pe Hamoni Sync, cu un nume de datagrid. Inlocuieste AccountID și APP_ID șir cu contul dvs. și ID-ul aplicației. Deschideți linia de comandă și rulați node seed.js. Acest lucru ar trebui să aibă succes și să fie tipărit create success mesaj.

Acum putem lansa aplicația React și să vedem aplicația noastră în acțiune! Rulați comanda npm start în linia de comandă și va deschide aplicația în browserul dvs. implicit.

1611258967 524 Cum sa construiti un Datagrid editabil in timp real in

Ura! Avem o grilă de date editabilă în timp real cu paginare!

Concluzie

Am creat o rețea de date în timp real în React folosind react-table și Hamoni Sync. Cu react-table care alimentează grila de date și Hamoni Sync care gestionează starea pentru grila de date. Toate acestea au fost realizate în câteva linii de cod și mai puțin efort de proiectare a logicii stării în timp real. Puteți obține aplicația finalizată a ceea ce am creat GitHub. Este posibil să urmăriți ce celulă este în curs de editare sau să blocați celulele în curs de editare de către un alt utilizator. O voi lăsa ca un hack de weekend pentru tine.

Simțiți-vă liber să lăsați un comentariu dacă ceva nu este clar sau întâmpină probleme în timp ce încercați să adăugați celule de blocare sau evidențiere în curs de editare.

Codificare fericită?