Discussion :

[Huyenlong]

Bonjour

J'ai une petite incompréhension sur deux points qui sont corolaire dans une partie du code qui explique comment importer un component.

D'abord voici les trois fichier js.
Il y a le layout, qui importe le header qui importe le Title

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
//Layout
 
import React from "react";
 
import Footer from "./Footer";
import Header from "./Header";
 
export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      title: "Welcome",
    };
  }
 
  changeTitle(title) {
    this.setState({title});
  }
 
  render() {
    return (
      <div>
        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />
        <Footer />
      </div>
    );
  }
}

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
//Header
 
import React from "react";
 
import Title from "./Header/Title";
 
export default class Header extends React.Component {
  handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle(title);
  }
 
  render() {
    return (
      <div>
        <Title title={this.props.title} />
        <input value={this.props.title} onChange={this.handleChange.bind(this)} />
      </div>
    );
  }
}

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
//Title
import React from "react";
 
 
export default class Title extends React.Component {
  render() {
    return (
      <h1>{this.props.title}</h1>
    );
  }
}

• Ma 1ere question est au niveau du fichier header. Le event envoie ça valeur dans la const title.

Code js :

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

1
2
3
4
5
6
 
 
 handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle(title);
  }

this.props.changeTitle(title); veut dire, que la props changeTitle reçoit, a ou possède la valeur de la const title. On peut aussi donc l'écrire comme ceci :

Code js :

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

1
2
3
4
5
 
 handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle.title={titlle};
  }

c'est le premier point où mon cerveau bug un peut pour comprendre comment le changeTitle possède le (title).

• Le second point est toujours sur le changeTitle mais quand il passe dans autre fichier.

De base quand je vois ceci :

Code js :

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

1
2
3
 
// fichier layout.js
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />

Je comprends le changeTitle du fichier Header est égale, prend la valeur du changeTitle du fichier dans lequel il est. Mais pas l'inverse. Dans ce tutorial on démontre, si le changeTitle du fichier header change, il envoie la valeur dans le changeTitle du layout qui va modifier le :

Code js :

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

1
2
 
   this.setState({title});

Je n'ai pas compris pourquoi l'égalité entre les changeTitle, c est celui qui est importé qui affecte le résident du fichier js. Et surtout comment la valeur du title de

Code js :

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

1
2
 
{this.changeTitle.bind(this)}

a été modifié par celle là :

Code js :

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

1
2
3
4
5
6
 
<Header changeTitle/>
 
//qui est dans le fichier layout
 
this.props.changeTitle(title);

Merci pour l'aide

[gwyohm]

Salut,

• Ma 1ere question est au niveau du fichier header. Le event envoie ça valeur dans la const title.

Code js :

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

1
2
3
4
5
6
 
 
 handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle(title);
  }

this.props.changeTitle(title); veut dire, que la props changeTitle reçoit, a ou possède la valeur de la const title. On peut aussi donc l'écrire comme ceci :

Code js :

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

1
2
3
4
5
 
 handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle.title={title};
  }

Non, on ne peut pas l'écrire comme ceci.
Le composant header reçoit une props qui est une fonction. si tu fais ça:

Code js :

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

1
2
3
4
5
 
 handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle.title={title};
  }

tu écris une propriété title sur une fonction. C'est pas faux, mais c'est pas (à priori) ce que tu veux faire. Tu veux appeler la fonction changeTitle avec pour paramètre ce qui vient de l'événement.

Bonjour
De base quand je vois ceci :

Code js :

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

1
2
3
 
// fichier layout.js
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />

Je comprends le changeTitle du fichier Header est égale, prend la valeur du changeTitle du fichier dans lequel il est. Mais pas l'inverse. Dans ce tutorial on démontre, si le changeTitle du fichier header change, il envoie la valeur dans le changeTitle du layout qui va modifier le :

Code js :

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

1
2
 
   this.setState({title});

Je n'ai pas compris pourquoi l'égalité entre les changeTitle, c est celui qui est importé qui affecte le résident du fichier js. Et surtout comment la valeur du title de

Code js :

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

1
2
 
{this.changeTitle.bind(this)}

a été modifié par celle là :

Code js :

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

1
2
3
4
5
6
 
<Header changeTitle/>
 
//qui est dans le fichier layout
 
this.props.changeTitle(title);

je vais essayer de te clarifier tout ca.
Le principe, c'est qu'un composant ne peut pas modifier ses props.
Le composant Header accepte 2 props: title et changeTitle. title est une String (le titre qu'il affiche), changeTitle est une fonction qui prend en parametre une string.
Le composant Layout, lui il stocke dans son state la valeur title.
Un composant n'a pas le droit de modifier ses props, mais il peut modifier son state.
donc Layout dessine Header et lui donne comme valeur de title la valeur de son state, et changeTitle qui est une fonction qui met à jour son state avec le parametre passé en paramètre.

Dans Header, la props title est passée au composant Title, et la props changeTitle est utilisée pour propager l'événement sur l'input.

C'est plus clair ?

[Huyenlong]

Je pense avoir tout compris. Voilà le raisonnement.
Ce que j'avais oublié, le layout en dessinant le Header donne la valeurs de son state.title au title du header. Donc dans le header la function handleChange change le title du layout, et comme tu dis ce n'est que le setState qui change la valeur. Donc le title es modifié grâce au changeTitle avec le setState qui est envoyé aussi dans le fichier header.

Je pense que c est bien ça. En tout cas en le disant, écrivant, ça fait apprendre la logique bien mieux