Scribd
Încărcați
64 vizualizări4 pagini

React

Documentul explică modul în care putem gestiona evenimentele onChange și onClick în componentele React. Pentru onChange se prezintă cum putem stoca valoarea selectată într-o variabilă de stare și actualiza această valoare la schimbarea opțiunii. Pentru onClick se prezintă 5 modalități de a gestiona evenimentul: apelând o funcție inline, actualizând stare, apelând mai multe funcții, transmitând un parametru și utilizând evenimente sintetice.

Încărcat de

Raluca Bruma
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
64 vizualizări4 pagini

React

Documentul explică modul în care putem gestiona evenimentele onChange și onClick în componentele React. Pentru onChange se prezintă cum putem stoca valoarea selectată într-o variabilă de stare și actualiza această valoare la schimbarea opțiunii. Pentru onClick se prezintă 5 modalități de a gestiona evenimentul: apelând o funcție inline, actualizând stare, apelând mai multe funcții, transmitând un parametru și utilizând evenimente sintetice.

Încărcat de

Raluca Bruma
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd

onChange

JS ne permite modificarea unei intrari prin intermediul atributului onChange.


Evenimentul onChange pe un element selectat:
1. Setam ‘onChange’ pe elemental selectat
2. Pastram valoarea optiunii selectate intr-o variabila de stare
3. De fiecare data cand utilizatorul modifica optiunea selectata, actualizam variabila de
stare
Am folosit useState pt a stoca valoarea optiunii selectate.
Parametrul din useState este starea initiala, in ex de mai sus setam valoarea selectata initial la
un sir gol, care este valoarea primului element ‘option’.
Setam onChance pe select astfel incat de fiecare data cand valoarea este schimbata, functia
handleChange este invocata.
Putem accesa valoarea selectata ca ‘[Link]’.
In functia handleChange actualizam starea cu valoarea optiunii selectate.

Varianta in care putem introduce manual optiunile elementului


‘select’ fara a utiliza ‘map()’:
const App = () => {

// 👇️initial value of empty string (first option)


const [selected, setSelected] = useState('');

const handleChange = event => {

[Link]('Label 👉️
', [Link][0].label);
[Link]([Link]);
setSelected([Link]);
};

return (
<div>
<select value={selected} onChange={handleChange}>
<option value="">--Choose and option--</option>
<option value="apple">Apple 🍏</option>

<option value="banana">Banana 🍌</option>


<option value="kiwi">Kiwi </option>
</select>
</div>
);
};

onClick

Gestionarea evenimentelor onClick în componentele React, vom


analiza 5 dintre ele:
1. Apelam o funcție inline într-un onClick
Funcțiile inline ne permit să scrieți cod pentru gestionarea evenimentelor direct în JSX.

const App = () => {


return (
<button onClick={() => alert("Hello!")}>Say Hello</button>
);
};

2. Actualizați starea din interiorul unui onClick

const App = () => {


const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};

3. Apelați mai multe funcții într-un onClick


Făcând clic pe butonul crește starea locală și alertează un mesaj:
const App = () => {

const [count, setCount] = useState(0);

const sayHello = () => {


alert("Hello!");
};

return (
<div>
<p>{count}</p>
<button
onClick={() => {
sayHello();
setCount(count + 1);
}}
>
Say Hello and Increment
</button>
</div>
);
};

4. Transmite un parametru unui onClick ,astfel încât să poată fi utilizat mai târziu.

const App = () => {


const sayHello = (name) => {
alert(`Hello, ${name}!`);
};

return (
<button onClick={() => { sayHello("Yomi"); } } >
Say Hello
</button>
);
};

5. Utilizați evenimente sintetice direct în cadrul unui onClick


const App = () => {
return (
<button value="Hello!" onClick={(e) => alert([Link])}>
Say Hello
</button>
);
};

S-ar putea să vă placă și