PL
React - alert po kliknięciu na przycisk
0 points
W tym artykule chcielibyśmy pokazać w jaki sposób wyświetlić alert w odpowiedzi na zdarzenie onClick w Reakcie.
W poniższym przykładzie alert jest umieszczony wewnątrz funkcji przypisanej bezpośrednio do właściwości onClick.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => {6
return (7
<div >8
<button onClick={() => alert('wyłapano kliknięcie przycisku')}>Kliknij mnie</button>9
</div>10
);11
};12
13
const root = document.querySelector('#root');14
ReactDOM.render(<App />, root );W poniższym przykładzie tworzymy zewnętrzną funkcję handleClick, która wyświetla alert. Następnie przekazujemy funcję handleClick do właściwości onClick, która obsługuje zdarzenie kliknięcia myszką.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const handleClick = () => {6
alert('wyłapano kliknięcie przycisku');7
};8
9
const App = () => {10
return (11
<div >12
<button onClick={handleClick}>Kliknij mnie</button>13
</div>14
);15
};16
17
const root = document.querySelector('#root');18
ReactDOM.render(<App />, root );