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 ‘event.target.value’.
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 => {

console.log('Label 👉️
', event.target.selectedOptions[0].label);
console.log(event.target.value);
setSelected(event.target.value);
};

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(e.target.value)}>
Say Hello
</button>
);
};