React notikumu tipi “EVENTS”

Tagad jūs, iespējams, jau esat iepazinies ar notikumiem JavaScript. Atcerieties, ka notikumi ir process, kurā JavaScript mijiedarbojas ar HTML, un tas var notikt, kad lietotājs vai pārlūkprogramma manipulē ar lapu. Tie nodrošina uzlabotu interaktīvu pieredzi, piemēram, reaģēšanu uz peles klikšķiem, kustībām vai tastatūras komandām.

CLICKS – MOVEMENTS – COMMANDS

Tā kā notikumi parasti ir balstīti uz kādu mijiedarbību, tiem ir “”jāgaida un fonā un jāieklausās”, līdz notiek mijiedarbība, pirms tos var aktivizēt.

[POGA]<—ieklausās–[NOTIKUMS]—>mijiedarbība–>[Funkcija]

Katrs HTML elements satur notikumu kopu, kam izstrādātāji var piekļūt, izmantojot HTML atribūtus, ko parasti dēvē par notikumu klausītājiem (event listeners). Piemēram, tīmekļa vietnes vai lietotnes bieži sastopama iezīme ir poga, uz kuras noklikšķinot, notiek kaut kas.

<button onclick="pievienoGrozam()">Pievienot preci grozam</button>

Skaidrojošs piemērs…

Šī darbība ir notikuma piemērs, un tā tiek veikta ar notikumu uztvērēja metodēm vai definējot noteiktas JavaScript funkcijas. Izstrādātāji var izmantot notikumus, lai izpildītu JavaScript kodu, reaģējot uz darbību, kuras pamatā ir lietotāja interaktivitāte, piemēram, noklikšķinot uz pogas. Šis process, kurā HTML poga sazinās ar JavaScript notikumu apstrādātāju, lai izpildītu kādu kodu un reaģētu uz notikuma darbību, ir pazīstams kā aktivizēšana.

Piemēram, iespējams, vēlēsities noklausīties klikšķa notikumu uz pogas “Pievienot grozam”. Kad esat tvēris šādu notikumu, iespējams, vēlēsities palaist JavaScript kodu. Šajā piemērā iepirkumu

grozā es vienkārši apvelku ar ciparu 1, lai norādītu, ka ir pievienota viena prece.

function pievienotGrozam(grozaNumurs) {

grozaNumurs += 1

return grozaNumurs

}

Ja tas pats notikums tiek aktivizēts vai aktivizēts vēlreiz, mūsu notikumu apstrādes kods, kas apstrādā notikumu, atjauninot skaitu aplī blakus iepirkumu groza ikonai. Pēc tam aplī tiek parādīts skaitlis 2, kas norāda, ka grozā ir divas preces.

Events, jeb notikumu skaidrojums

Notikumi ir spēcīgs instruments, un tie ir daļa no dokumenta objekta modeļa (DOM). Kā topošajam React izstrādātājam jums būs jāzina, kā strādāt ar notikumiem, jo tie tiek apstrādāti nedaudz atšķirīgi. Šis raksts Jums palīdzēs noteikt plašos React pieejamos notikumu veidus un aprakstīt dažus no visbiežāk izmantotajiem.  React kodā notikumi tiek apstrādāti, izmantojot JSX notikumu atribūtus, kas ir ļoti līdzīgi HTML notikumu atribūtiem, kas jums varētu būt pazīstami. Piemēram, klikšķu apstrādes atribūti HTML ir onclick atribūts ar visiem mazajiem burtiem. Līdzvērtīgi klikšķu apstrādes atribūti React JSX ir atribūts “camelCased” onClick.

Atcerieties, ka “camelCased” nozīmē, ka pirmais burts ir mazais un vārdu atdalīšana tiek norādīta ar lielo burtu, nevis atstarpi.

React tiek atbalstīti daudzi pasākumi, kurus var iedalīt vairākās grupās. Šīs grupas ietver

• starpliktuves notikumus / Clipboard events,
• kompozīcijas notikumus / Composition events,
• tastatūras notikumus / Keyboard events,
• peles notikumus / Mouse events,
• atlases notikumus / Selection events,
• pieskāriena notikumus / Touch events,
• skrullēšanas notikumus / Scroll events,
• animācijas notikumus / Animation events,

un daudz ko citu…

Katra grupa parasti nodrošina vairākus pasākumus. Piemēram, atbalstītie peles notikumi ir

• onClick,
• onContextMenu,
• onDoubleClick,
• onDRag,
• onDRop,
• onMouseDown,
• onMouseUp,
• onMouseEnter,
• onMouseLeave,
• onMouseOver,

un vairāki citi.

Jūs arī atklāsit, ka starpliktuves grupā ir noderīgi notikumi:

• onCopy,
• onCuts,
• onPaste,

Īsumā…

Šeit ir pārāk daudz notikumu, ko apskatīt tāpēc visus pašlaik neminēšu, taču pilnu sarakstu varat atrast papildu resursā, kuru pievienošu raksta beigās. Lielais notikumu veidu skaits, kas ir pieejams programmā React, sākotnēji var šķist milzīgs. Taču ņemiet vērā, ka patiesībā šīs funkcijas ir aprīkotas ar pārlūkprogrammu, jo dažādas ierīces, kuras mēs izmantojam, lai piekļūtu incidentam, ir radījušas daudz veidu, kā lietotāji var mijiedarboties ar vietnēm. Tas nozīmē, ka šie notikumi nav specifiski React, un, iespējams, nav nepieciešams uzzināt par visiem šiem notikumiem. Ņemiet vērā arī to, ka daudzi no šiem notikumiem ir saistīti ar konkrētiem lietošanas gadījumiem. Piemēram, vairāki peles notikumi ir ierobežoti ar vilkšanas un nomešanas API. Citiem vārdiem sakot, šajā mācību ceļojuma brīdī jums jākoncentrējas uz izpratni par kopējo notikumu apstrādes procesu un to, kādas iespējas notikumi var jums pavērt. Šajā rakstā jūs uzzinājāt par React pieejamo notikumu veidiem un to rašanos. Pēc tam jūs izpētīsit konkrētus piemērus un attīstīsit prasmes, lai kompetenti izmantotu notikumus dažādās situācijās.

Notikumiem bagāti jautājumi

Tagad jūs zināt, ka React var darboties ar lielāko daļu no tiem pašiem notikumiem, kas atrodami HTML, lai gan React tos apstrādā atšķirīgi.

Tas nozīmē, ka, palaižot uz notikumu balstītu React kodu, var rasties nepazīstamas kļūdas. Tomēr šajā rakstā jūs uzzināsiet par dažām visbiežāk sastopamajām kļūdām, kas saistītas ar notikumiem, un to, kā ar tām rīkoties.

Pasākumu kļūdas

Strādājot jebkurā programmēšanas vidē, valodā vai sistēmā, jums ir jāraksta kods, kas dažādu iemeslu dēļ rada kļūdas.

Dažreiz runa ir tikai par nepareizas sintakses rakstīšanu. Citreiz runa ir par nedomāšanu par visiem iespējamiem scenārijiem un visiem iespējamiem veidiem, kā un kas kodā var noiet greizi.

Neatkarīgi no tā, kas tās izraisa, kļūdas ir izstrādātāja ikdienas sastāvdaļa.

JavaScript valodai ir iebūvēta kļūdu apstrādes sintakse, try…catch sintakse.

Apskatīsim JavaScript kļūdas piemēru:

(5).toUpperCase()

Acīmredzot skaitļa vērtību nevar ievadīt ar lielajiem burtiem, un tādējādi tiek parādīta šāda kļūda:

Uncaught TypeError: 5.toUpperCase is not a function

try {
(5).toUpperCase();
}
catch(e) {
console.log(`Ak, jūs nevarat rakstīt ciparus ar lielajiem burtiem.
Mēģinot to izdarīt, radās sekojošais`, e);
}

function NumBillboard(props) {
    return (
      <>
        <h1>{prop.num}</h1>
      </>
    )
  }


export default NumBillboard;

ReferenceError

prop is not defined

Note: You can click the X button to close the error overlay.

npx create-react-app notikumi

cd notikumi

npm start

import Poga from './Poga'
import './App.css';


function App() {
  return (
    <Poga />
  );
}


export default App;

 function Poga() {
     const clickHandler =
     () => console.log('Veiksmīgi nospiesta')
     return (
         <button onClick={clickHandler}>
             Noklikšķini mani!
         </button>
     );


 }


export default Poga

function Poga() {
    const clickHandler =
    () => console.log('Veiksmīgi noglaudīta')
    return (
        <button onMouseOver={clickHandler}>
            Noglaudi mani!
        </button>
    );


}


export default Poga