PL
React - zdarzenie onClick w elemencie div
0 points
W tym artykule chcielibyśmy pokazać, jak obsłużyć zdarzenie kliknięcia myszką na element div w Reakcie.
Poniższy przykład używa:
- hooka
useState()do przechowywania wartościcolor. - własności
onClickdo obsługi zdarzenia.
Praktyczny przykład:
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
const [color, setColor] = React.useState('yellow');7
const handleClick= () => {8
setColor(color === 'yellow' ? 'orange' : 'yellow');9
}10
return (11
<div style={{ background: color }} onClick={handleClick}>12
Kliknij mnie, aby zmienić kolor.13
</div>14
);15
}16
const root = document.querySelector('#root');17
ReactDOM.render(<App/>, root );Uwaga:
Przejdź do tego artykułu, aby zobaczyć wersję z użyciem komponentu klasowego.