PL
React - zdarzenie onClick w elemencie div (komponent klasowy)
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:
- stanu komponentu do przechowywania wartości
color, - metodę
setState()do aktualizacji 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
class App extends React.Component {6
constructor(props) {7
super(props);8
this.state = {9
color: 'yellow'10
};11
}12
handleClick = () => {13
this.setState({ color: this.state.color === 'yellow' ? 'orange' : 'yellow' });14
};15
render = () => {16
return (17
<div style={{ background: this.state.color }} onClick={this.handleClick}>18
Kliknij mnie, aby zmienić kolor.19
</div>20
);21
};22
}23
24
const root = document.querySelector('#root');25
ReactDOM.render(<App />, root);Uwaga:
Przejdź do tego artykułu, aby zobaczyć wersję z użyciem komponentu funkcyjnego.