React apstrādātāji un iegultās izteiksmes – Sintakse

(jeb EVENT HANDLERS)

Katru reizi, kad noklikšķināt vai pieskaraties pogai, ritiniet lapu uz leju vai atceļat garlaicīgu paziņojumu, pārlūkprogrammā tiek parādīti notikumi. Lai šiem notikumiem būtu kāda ietekme, jums ir jāizmanto notikumu apstrādātāji (event handlers), kas pēc tam izpildīs darbību. Piemēram, pieņemsim, ka izmantojat pogu, lai atvērtu izvēlni. Noklikšķinot uz pogas, tiek parādīts notikums. Notikuma apstrādātājs tiek noklikšķināts, un darbība, kas seko notikumam, ir izvēlnes atvēršana. Ir dažas pieejas, kā pievienot notikumu apstrādātājus jūsu reakcijai uz kodu, kam ir dažādas priekšrocības, tāpēc būtu vērts iepazīt katru no tiem.

Šajā rakstā centīšos aprakstīt HTML un React sintakses atšķirības notikumu apstrādātāju izmantošanā, kā HTML funkcijas izsaukumu un React komponentu iekļaušanu, un komponentu vadības līmeņa priekšrocības.

Pieņemsim, ka esat izstrādātājs, kas strādā pie React lietotnes, un jums ir jāizveido poga, kas aktivizēs notikumu, kad lietotājs uz tās noklikšķinās. Paturot prātā šo scenāriju, apskatīsim dažus kodus, kas to nodrošina vienkāršā HTML.

HTML notikumu apstrādāšana

<button id="js-btn"

onclick="clickHandler() ">Noklikšķini mani!</button>

• Varat atvērt tagu ar nosaukumu js-btn.
• Pēc tam piešķirat klikšķa notikumu apstrādes atribūtu un iestatat to vienādu ar klikšķu apstrādātāja funkciju.
• Pēc tam kā pogas tekstu varat pievienot Noklikšķini mani! un pabeigt ar beigu tagu.

Kodam ir ID HTML atribūts ar vērtību “js btn”, kā arī notikumu apstrādes atribūts uz klikšķa. Lai gan piemērā esošais HTML kods šķiet diezgan vienkāršs, tā vietā ieteicams izmantot JavaScript tādos gadījumos kā šie.

Kāpēc tā? Nu, jūs uzzināsiet vēlāk. Bet pagaidām jums vajadzētu saprast, ka līdzvērtīgais kods JavaScript sastāv no divām galvenajām darbībām. Pirmkārt, jums vajadzētu izmantot JavaScript, lai pievienotu šiem konkrētajiem HTML elementiem, ko vēlaties klausīties notikumā.

Iepriekšējā piemērā HTML elements principā ir JavaScript poga, kas norāda, ka tas ir mērķa elements, kas ļauj JavaScript pārņemt kontroli pār HTML struktūru.

Otrkārt, kad esat ieguvis piekļuvi HTML elementiem ar JavaScript, varat izmantot dokumenta objektā iebūvēto pievienošanas metodi addEventListener, lai pievienotu konkrētu notikumu klausītāju. Lietojot šo metodi iepriekšējā piemērā, HTML tiek noņemts no vienādojuma, bet kods, no otras puses, ir nedaudz sarežģītāks.

const jsBtn = document.getElementById('js-btn')

jsBtn.addEventListener('click', function() {

console.log('clicked')

})

• Konkrēti, vispirms ir jādeklarē konstante ar nosaukumu JS poga un jāpiešķir vērtība no DOM.
• Pēc tam jums jāpievieno klikšķu uztvērēja notikums un funkcija, lai palaistu kodu.

Atgriežoties pie React. Lielākā sintakses atšķirība ir metodes addEventListener izmantošana. React. Noteikums ir izvairīties no tiešas manipulācijas ar DOM, cik vien iespējams. Jums viss ir jāiestata deklaratīvi, tas nozīmē, ka jūs aprakstāt React atjauninājumus un ļaujiet tam izdomāt pārējo. To vislabāk var izdarīt, izmantojot notikuma atribūtu, diemžēl, HTML notikumu atribūtu un JSX notikumu atribūtu savstarpēja kartēšana nozīmē, ka to ir vieglāk iemācīties. React notikumu apstrāde kopumā ir diezgan līdzīga HTML. Taču ņemiet vērā, ka React notikumu apstrādes atribūtā nav funkciju izsaukšanas sintakses. Citiem vārdiem sakot, izmantojot vienkāršu JavaScript, jums ir jānosūta izsaukums notikumu apstrādes funkcijai kā klikšķa notikumu vērtība. Programmā React nevajadzētu izsaukt funkciju. Tā vietā jūs vienkārši nododat atsauci uz notikumu apstrādes funkciju, to neizsaucot. Lai ilustrētu šo punktu, salīdzināsim HTML klikšķu apstrādātāja notikuma sintaksi un tā reaktora JSX ekvivalentu.

Sintakses Salīdzinājumā…

HTML kodā tiek nodrošināts notikumu apstrādes atribūts, kas sākas ar on, un jāpievieno notikuma nosaukums. Visi mazie burti. Pēc vienādības zīmes izmantojiet dubultpēdiņu pāri. Dubultpēdiņu atdalītāju iekšpusē jūs izsaucat funkciju, kas darbosies pretēji HTML.

<button id="js-btn"
onclick="clickHandler()"
>Noklikšķini mani!</button>

Programmā React jūs sniedzat notikumu apstrādes atribūtus, kas sākas ar on, un pievienojat notikuma nosaukumu, katra vārda pirmo burtu rakstot ar lielo burtu. Pēc vienādības zīmes jūs izmantojat JSX izteiksmes atdalītājus, tas ir, atverošās un aizveramās figūriekavas. Figūriekavu norobežotāju iekšpusē jūs pievienojat izpildāmās funkcijas nosaukumu. Noteikti neizsauciet to.

<button
onClick={clickHandler}>
    Noklikšķini mani!
</button>

Visbeidzot, vēl viena funkcija, kas tiek izmantota tikai React, ir funkciju deklarāciju nodošana kā palīgierīces. Piemēram, lietotnes komponentā, pieņemsim, ka vēlaties renderēt pakārtoto komponentu ar nosaukumu Counter.

return (

<Counter />

)

Varat pārsūtīt dažus datus no lietotnes komponenta uz skaitītāja komponentu, izmantojot “prop”.

return (

<Counter onClick={clickHandler} />

)

Šajā gadījumā izmantosim klikšķināšanas rekvizītu, kas nodod datus, kurus vēlaties saņemt komponentam Counter. Tur jums tas ir. Nākamreiz, kad noklikšķināsit uz pogām tīmekļa lapā, aizverat paziņojumus vai vienkārši pārlūkojat, jūs sapratīsit, ka šos notikumus atbalsta kāda veida notikumu apstrāde. Šajā raksta daļā jūs uzzinājāt, kā atšķirt notikumu apstrādes sintaksi HTML un JavaScript.

Notikumu apstrāde un iegultās izteiksmes

Šajā raksta daļā jūs uzzināsiet dažādus veidus, kā iegult izteiksmes notikumu apstrādātājos programmā React.

• Ar iekļautu anonīmu ES5 funkciju
• Ar iekļautu, anonīmu ES6 funkciju (bultiņas funkciju)
• Izmantojot atsevišķu funkciju deklarāciju
• Izmantojot atsevišķu funkcijas izteiksmi

Šis raksts var būt noderīgs kā atsauces lapa.

Skaidrības un vienkāršības labad: funkcija vienkārši konsole reģistrēs dažus vārdus. Tas ļaus jums salīdzināt sintakses atšķirības starp šīm četrām pieejām, savukārt notikumu apstrādes rezultāts vienmēr būs vienāds: tikai daži vārdi tiek izvadīti konsolei.

Notikumu apstrāde, izmantojot iekļautās anonīmas ES5 funkcijas

Šī pieeja ļauj tieši nodot ES5 funkcijas deklarāciju kā onClick notikumu apstrādes atribūta vērtību:

<button onClick={function() {console.log('pirmais piemērs')}}>
    Iekļauts anonīms ES5 funkciju notikumu apstrādātājs
</button>

Lai gan ir iespējams rakstīt klikšķu apstrādātājus, izmantojot šo sintaksi, tā nav izplatīta pieeja, un šādu kodu React lietotnēs neatradīsit ļoti bieži.

Notikumu apstrāde, izmantojot iekļautās anonīmās ES6 funkcijas (bultiņu funkcijas)

Izmantojot šo pieeju, varat tieši nodot ES6 funkcijas deklarāciju kā onClick notikumu apstrādes atribūta vērtību:

<button onClick={() => console.log('otrais piemērs')}>
    Iekļauts anonīms ES6 funkciju notikumu apstrādātājs
</button>

Šī pieeja ir daudz izplatītāka nekā iepriekšējā. Ja vēlaties saglabāt visu savu loģiku JSX izteiksmē, kas piešķirta atribūtam onClick, izmantojiet šo sintaksi.

Notikumu apstrāde, izmantojot atsevišķas funkciju deklarācijas

Izmantojot šo pieeju, jūs deklarējat atsevišķu ES5 funkcijas deklarāciju un pēc tam atsaucat uz tās nosaukumu notikumu apstrādes atribūtā onClick, kā norādīts tālāk.

function App() {
    function trešaisPiemērs() {
        console.log('trešais piemērs');
    };
    return (
        <div className="trešaisPiemērs">
            <button onClick={trešaisPiemērs}>
                izmantojot atsevišķu funkciju deklarāciju
            </button>
        </div>
    );
};
export default App;

function App() {
    const ceturtaisPiemērs = () => console.log('ceturtais piemērs');


    return (
        <div className="ceturtaisPiemērs">
            <button onClick={ceturtaisPiemērs}>
                izmantojot atsevišķu funkcijas izteiksmi
            </button>
        </div>
  );
};
export default App;

Nobeigums

Sintakse šajā piemērā ir ļoti izplatīta programmā React. Tas izmanto bultiņu funkcijas, bet arī ļauj mums rīkoties situācijās, kad mūsu atsevišķās funkcijas izteiksme aptver vairākas koda rindas.

Šajā raksta daļā jūs uzzinājāt par vairāku veidu funkcijām, kuras varat izmantot, lai apstrādātu notikumus programmā React. Daži no tiem ir biežāk redzami nekā citi, taču tagad, kad jūs zināt visus dažādos veidus, kā to izdarīt, varat vieglāk saprast citu cilvēku kodu, kā arī izvēlēties sintaksi, kas vislabāk atbilst jūsu konkrētajam lietošanas gadījumam.