Izmantojot āķus jeb hooks…

Tagad, kad esat sapratis, kādi āķi ir programmā React, un jums ir dažas pamatzināšanas par useState āķi, nedaudz iedziļināsimies šajā visā, lai to izprastu pilnīgāk. Šajā rakstā jūs uzzināsiet, kā izmantot hooks, jeb āķus React komponentos, un izpratīsiet useState hook lietošanas gadījumus.

Pieņemsim, ka jums ir komponents ar ievades teksta lauku. Lietotājs var rakstīt šajā teksta laukā. Komponentam ir jāseko tam, ko lietotājs ieraksta šajā teksta laukā. Varat pievienot stāvokli un izmantot āķi useState, lai turētu virkni.

Lietotājam turpinot rakstīt, vietējam stāvoklim, kurā ir virkne, ir jāatjaunina jaunākais ievadītais teksts.

Apspriedīsim tālāk sniegto piemēru.

import logo from './logo.svg';
import './App.css';
import InputComponent from './InputComponent.js';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Praktizējam rīkoties ar āķi
        </p>
        <InputComponent />
      </header>
    </div>
  );
}


export default App;

• Ievades teksta lauks
• Jebkurš teksts, kas ir ievadīts laukā
• Poga Atiestatīt, lai iestatītu lauku atpakaļ tā noklusējuma stāvokli

Kad lietotājs sāk rakstīt teksta laukā, tiek parādīts arī pašreizējais rakstītais teksts.

Stāvokļa, jeb state mainīgais inputText un setText metode tiek izmantoti, lai iestatītu pašreizējo tekstu, kas tiek drukāts. UseState āķis tiek inicializēts komponenta sākumā.

const [inputText, setText] = useState('sveiks');

Pēc noklusējuma ievades teksts tiks iestatīts uz “sveiks”.

Lietotājam rakstot, funkcija handleChange nolasa jaunāko ievades vērtību no pārlūkprogrammas ievades DOM elementa un izsauc funkciju setText, lai atjauninātu inputText vietējo stāvokli.

function handleChange(e) {
    setText(e.target.value);
};

• Jūs varat izsaukt tikai jūsu komponenta augšējā līmeņa āķus vai savus āķus.
• Jūs nevarat izsaukt āķus cilpu ,vai nosacījumu iekšienē.
• Varat izsaukt tikai āķus no React funkcijām, nevis parastajām JavaScript funkcijām.

Lai parādītu, paplašināsim iepriekšējo piemēru, iekļaujot trīs ievades teksta laukus vienā komponentā. Tā varētu būt reģistrācijas veidlapa ar laukiem vārdam, uzvārdam un e-pasta adresei.

import { useState } from 'react';


export default function RegisterForm() {
  const [form, setForm] = useState({
    firstName: 'Lietotāja Vārds',
    lastName: 'Lietotāja Uzvārds',
    email: 'Pamācības@kas.id.lv',
  });


  return (
    <>
      <label>
        Vārds:
        <input
          value={form.firstName}
          onChange={e => {
            setForm({
              ...form,
              firstName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Uzvārds:
        <input
          value={form.lastName}
          onChange={e => {
            setForm({
              ...form,
              lastName: e.target.value
            });
          }}
        />
      </label>
      <label>
        E-pasts:
        <input
          value={form.email}
          onChange={e => {
            setForm({
              ...form,
              email: e.target.value
            });
          }}
        />
      </label>
      <p>
        {form.firstName}{' '}
        {form.lastName}{' '}
        ({form.email})
      </p>
    </>
  );
}

Šajā gadījumā nav nepieciešami trīs atsevišķi stāvokļa mainīgie, un tā vietā varat tos visus apvienot vienā formas objektā, lai nodrošinātu labāku lasāmību.

Papildus useState āķim ir arī citi āķi, kas noder, piemēram, useContext, useMemo, useRef utt. Ja jums ir nepieciešams koplietot loģiku un atkārtoti izmantot to pašu loģiku vairākos komponentos, varat iegūt loģiku pielāgotā āķī. Pielāgoti āķi piedāvā elastību, un tos var izmantot dažādiem lietošanas gadījumiem, piemēram, veidlapu apstrādei, animācijai, taimeriem un daudzām citām vajadzībām.

useRef hook…

Tālāk es jums sniegšu paskaidrojumu par to, kā darbojas useRef āķis.

function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Pašreizējais norāda uz pievienoto teksta ievades elementu
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Fokusēt ievadi</button>
</>
);
}