Discussion :

[Jildo]

Salut,

Je suis novice en React et j'aimerai comprendre une partie du code suivant:

Comment incrementValue reçoit la valeur de increment ? Quelle est le lien entre les deux ? D'où incrementValue sait qu'il soit prendre la valeur de increment ?

Merci.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function App() {
	const [counter, setCounter] = useState(0);
        const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Button onClickFunction={incrementCounter} increment={5} />
      <Button onClickFunction={incrementCounter} increment={10} />
      <Button onClickFunction={incrementCounter} increment={100} />
      <Display message={counter}/>
    </div>  
  );
}

[gwyohm]

La réponse doit être dans ton composant Button. il doit y avoir qqch comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
const {onClickFunction, increment } = props;
return (<button onclick={() => onClickFunction(increment)}></button>);

[Jildo]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
	return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

Voici ma fonction Boutton mais le calcule ne se fait pas à ce niveau la ? => setCounter(counter+incrementValue)
Qui serait donc la valeur du chiffre précédent + la valeur de l'increment sur lequel on a appuyé ?

[gwyohm]

OK,
j'avais mal compris ta question

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
// on a besoin d'utiliser dans le state une valeur qui a pour valeur initiale 0. (appel de useState(0))
// la fonction useState nous renvoie un tableau contenant la valeur actuelle (variabilisée en counter, et une fonction permettant de mettre à jour cette entrée dans le state variabilisée en setCounter)
const [counter, setCounter] = useState(0);
 
// on construit une fonction qui prend un parametre et qui appelle setCounter en ajoutant le parametre à la valeur actuelle de counter
const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
 
// ...
// on passe cette fonction à des composants avec une valeur d'incrément à donner.
<Button onClickFunction={incrementCounter} increment={1} />

C'est plus clair ?

[Jildo]

Hello,

Merci c'est bon tes explications on été clair et j'ai enfin compris le cheminement des choses.
Merci a toi !