42 lines
899 B
JavaScript
42 lines
899 B
JavaScript
|
// components/counter.js
|
||
|
|
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
class Counter extends React.Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
// On fait appel au constructeur de la classe
|
||
|
|
// parente
|
||
|
|
super(props)
|
||
|
|
|
||
|
|
// Initialisation du "state" du composant
|
||
|
|
this.state = {
|
||
|
|
count: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Méthode de rendu du composant
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
Count: <span>{ this.state.count }</span>
|
||
|
|
<button onClick={ () => this.increment() }>+1</button>
|
||
|
|
<button onClick={ () => this.decrement() }>-1</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
// La méthode increment() incrémente la valeur du compteur de 1
|
||
|
|
increment() {
|
||
|
|
this.setState(prevState => ({ count: prevState.count+1 }))
|
||
|
|
}
|
||
|
|
|
||
|
|
// La méthode decrement() incrémente la valeur du compteur de 1
|
||
|
|
decrement() {
|
||
|
|
this.setState(prevState => ({ count: prevState.count-1 }))
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Counter
|