React “Steita” novērošana – teksta maiņa ar pogu

tātad kopumā turpinām iepriekšējo rakstu tēmu par steitiem, āķiem (jeb hooks) un aktuālo datu maiņu, kā arī interaktivitātes piešķiršanu React lietotņu datos. 

Kāpēc mēs izmantojam “steitus” programmā React? Jo tas ir viens no veidiem, kā rīkoties ar datiem mūsu React lietotnēs. Steits ir spēcīgs Reacts rīks, ko izstrādātāji izmanto, lai pārvaldītu datus, kas, iespējams, mainīsies lietojumprogrammā. Atcerieties, ka steita dati ir paša komponenta iekšējie dati. Tas ļauj komponentus atkārtoti renderēt, pamatojoties uz izmaiņām steita datos, un parādīt lietotājam jaunākos atjauninājumus. Paturot to prātā, izpētīsim, kā varat atjaunināt divus komponentus, izmantojot useState Hook, ar kuru saskārāties iepriekš.

const [ date, setDate ] = React.useState(new Date());

UseState Hook ļauj komponentiem definēt un izsekot (observed) stāvokli. Tas tiek darīts ar diviem argumentiem. Pirmais no tiem piekļūst stāvoklim, bet otrais to atjaunina ar funkciju. Piemēram, varat izmantot datuma mainīgo, lai piekļūtu datuma stāvoklim dateState. Pēc tam izmantojiet iestatīšanas datuma setDate funkciju, lai atjauninātu stāvokli. Lai palīdzētu jums saprast, cik noderīgs var būt useState Hook, jūs tagad izpētīsit piemēru, kas parāda, kā to izmantot, lai novērotu un manipulētu ar komponenta stāvokli.

Heading.js kods:

function Heading(props) {
    return (
        <h1>{props.message}</h1>
    )
}
export default Heading

Šajā lietotnes piemērā man ir Headings, pakārtotie komponenti. Tas saņem rekvizītus un objektu, kā arī piekļūst ziņojuma props rekvizītam, pirms tas to atgriež un atveido kā H1 elementu. Vecāku komponentā App.js es importēju virsraksta komponentu Headings.js un iestatu vārdu kā stāvokļa mainīgo, kas iestatīts uz virkni Mācības. Pagaidām ignorēju komentārus pēc Mācības virknes. Atgriešanās priekšrakstā es iesaiņoju virsraksta komponentus vienā div. Es nododu vēstījuma rekvizītu  “+” un pēc tam “kas.id.lv“, kas viss ir ietīts atveramā un aizveramā figūriekavā.

App.js kods:

import React, { useState } from 'react';
import Heading from './Heading';
import './App.css';


function App() {
  const [word, setWord] = React.useState('Mācības')


  // setWord('Atpūta')


  return (
    <div className="App">
      <Heading message={word + " kas.id.lv"}/>
    </div>
  );



}


export default App;

Jūs jau zināt, ka tā ir atvēršanas un aizverošā figūriekava apzīmē JSX izteiksmi, kas nozīmē, ka viss kods, kas atrodas šajās figūriekavās, tiks novērtēts kā parastais JavaScript. JavaScript dzinējs ņem vārdu “Mācības” un savieno to, tātad vārdus “kas.id.lv”. Tādējādi pārlūkprogrammas logā es redzu vārdus “Mācības kas.id.lv”.

Ja es vēlos atjaunināt vārda Steita mainīgā vērtību uz kaut ko citu, piemēram, “Atpūta”, es varētu tieši izmantot setWord funkciju, lai palīdzētu man to sasniegt (jā, to, kurš pašreiz piemērā ir aizkomentēts un neaktīvs). Tomēr, atkomentējot viņu, saglabājot izmaiņas un palaižot savu kodu, lietotne nedarbosies. Tas ir tāpēc, ka nevar tieši izmantot steita iestatījumu mainīgo no jūsu steita. Tā vietā, lai to atjauninātu tieši, es varu to atjaunināt, pamatojoties uz klikšķa notikumu clickEvent vienkārši izmainot kodu, lai tas darbotos kā cerēts.

Man ir vēl viens elements, ko sauc par pogu, un onClick ir vienāds ar handleClick ko arī es ieviesīšu atjaunotaja kodā. Tagad es iestatīju citu funkciju, kuru nosaukšu par handedClick.

import React, { useState } from 'react';
import Heading from './Heading';
import './App.css';


function App() {
  const [word, setWord] = React.useState('Mācības')


function handleClick() {
  setWord('Atpūta')
}
  return (
    <div className="App">
      <Heading message={word + " kas.id.lv"}/>
      <button onClick={handleClick}>Noklikšķiniet šeit</button>
    </div>
  );



}


export default App;

HandClick funkcijas definīcijā es palaižu setWord uz “Atpūta”. Es noklikšķinu uz “File, Save All” un gaidu, līdz lietojumprogrammas tiks apkopotas.

Tagad, kad es noklikšķinu uz pogas “Noklikšķiniet šeit”, es atpūšos kas.id.lv jo tā liecina aplikācijā pogas nomainītais uzraksts.

Nobeigumā…

Lai novērotu un atjauninātu steitu, varat izmantot steita iestatīšanas funkcijas un steita mainīgos, izmantojot state hook. Bet jums ir jāpārliecinās, ka izmantojat notikumu apstrādes atribūtus JSX sintaksē vai citās pieejās, par kurām mēs uzzināsim vairāk vēlāk jau nakošajos rakstos. Šajā rakstā jūs uzzinājāt par steita maiņas pamatprincipiem programmā React, tostarp par to, kā lietot steita sintaksi, novērot steitu, komponentus un manipulēt ar tiem.