Discussion :

[Huyenlong]

Bonjour

Je tente de modifier un code d'un tutorial que j'ai suivi pour comprendre les props et state.

voici le code de base :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
class Search extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      searchText: "",
      searchCount: 0,
      resultCount: 0
    };
  }
 
  changeSearchText(event) {
    var v = event.target.value;
    this.setState((prevState, props) => {
      return {
        searchText: v
      };
    });
  }
 
  doSearch() {
    this.setState( (prevState, props) => {
      var count = this.state.searchText.length * 3;
      return {
        searchCount: prevState.searchCount + 1,
        resultCount: count
      };
    });
  }
 
  render() {
    return (
      <div className='search-box'>
        <input
          type="text"
          value={this.state.searchText}
          onChange={this.changeSearchText.bind(this)}
        />
        <button onClick={this.doSearch.bind(this)}>Search</button>
        <div>Search Text: {this.state.searchText}</div>
        <div>Search Count: {this.state.searchCount}</div>
        <div>Result Count: {this.state.resultCount}</div>
      </div>
    );
  }
}
 
// Render
ReactDOM.render(<Search />, document.getElementById("search1"));

Dans mon code ci-dessous j'ai bien séparé les Div dans une constante, je l'affiche et ça marche bien. Mais quand je tente de lier ma const search avec la class textCount, j'ai du passer à côté de quelques choses. Surtout il me manque des connaissances. Après avoir bien cherché sur le net je me tourne vers vous.

Mon code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
import React, { Component } from 'react'
 
const text = {
    searchText : "",
    searchCount : 0,
    resultCount : 0
};
 
const search  = () => {
 
    return (
    <div className = 'search-box'>
        <input
        type = 'text'
        value = {text.searchText}
        onCHange = {Txtcount.switchSearchText}
        />
 
    <button onClick>Search</button>
    <div>Search text:{text.searchText}</div>
    <div>Search count</div>
    <div>Search resut</div>
    </div>
    )
}
 
class Txtcount extends Component {
 
    constructor (props) {
        super(props);
 
        this.state = {
            searchText : "",
            searchCount : 0,
            resultCount : 0
        };
    }
 
 
    switchSearchText(event) {
        let v = event.target.value;
        this.setState ((prevState, props) => {
            return {
                searchText:v
                text.searchText=searchText
            };
        })
    }
 
    doSearch(){
        this.setState((prevState, props) => {
            let count = this.searchText.lengh*3;
            return {
                searchCount : prevState.searchCount + 1,
                resultCount : count
            }
        }
        )
    }
 
 
 
    render () {
        return (
            <search/>
 
        )
    }
}
 
export default Txtcount;

Je souhaiterai simplement sortir le Div et le mettre dans une const. Comme ça je peux dupliquer le div dans la class pour instancier l'input.

C'est un défis exercice que je me suis lancé pour encore mieux comprendre

Merci pour l'aide

[gwyohm]

Salut,

Je souhaiterai simplement sortir le Div et le mettre dans une const. Comme ça je peux dupliquer le div dans la class pour instancier l'input.

Je comprends pas ce que tu veux faire. Tu peux donner un exemple plus simple de ce à quoi tu voudrais arriver ?

[Huyenlong]

salut @gwyohm, désolé de répondre aussi tard

Ce que je souhaite faire, en prenant le code original je veux sortir les fonction et la div qui a le bouton. Les séparé pour pouvoir dupliquer la div dans le class TextCount.

Car je me dis, ce n'est pas fun de copié collé le code autant de fois pour avoir plusieurs bouton.

Donc on m a conseillé d apprendre les hook et c est possible avec.

Là je fais des test avec les hook de mettre une fonction d un coté, et de la choper dans une autre fonction puis de l exporter mais ça ne marche pas.

Voici mon code :

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
 
import React, { Component, useState }  from 'react'
 
function ExtraCount () {
    const [count, setCount] = useState (0);
    return (
        function Clicking ()=> {setCount(count+1)}
        )
    }
 
fucntion ClickButon () {
<button onClick={ExtraCount.Clicking}></button>
}
 
 
    class Txtcount extends Component {
 
        render () {
            return (
                <ClickButon/>
            )
        }
    }
 
    export default Txtcount;

Dans la fonction extra count je crée la fonction qui incrémente le click
dans la fonction clickbuton, je crée un bouton et j'appelle la fonction exraCount pour incrémenter le click. Mais j'ai une erreur.

[gwyohm]

Salut,

Alors tout d'abord, quand on écrit des hooks, une bonne pratique, c'est de les nommer useXXX. C'est pas une grande importance pour ton exercice, mais ca permet de prendre les bonnes habitudes.
Ensuite, je vois plusieurs problèmes:

Code :

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

1
2
3
4
5
6
7
 
function ExtraCount () {
    const [count, setCount] = useState (0);
    return (
        function Clicking ()=> {setCount(count+1)}
        )
    }

tu mélange arrows et function, je sais pas ce que ca fait.
tu devrais faire

Code :

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

return (function() {setCount(count+1)});

ou

Code :

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

return () => setCount(count+1); // solution préférée

Code :

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

<button onClick={ExtraCount.Clicking}></button>

ExtraCount dans ton code est une fonction qui n'a pas la propriété Clicking. c'est l'execution de cette fonction qui va te renvoyer une fonction.
La bonne approche est je pense:

Code :

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

1
2
3
4
5
6
7
8
9
 
function useExtraCount () {
    const [count, setCount] = useState (0);
    return () =>setCount(count+1);
}
function ClickButon () {
const clickHandler = useExtraCount();
return(<button onClick={clickHandler}></button>);
}

Enfin,

Mais j'ai une erreur.

Quelle erreur ?

[Huyenlong]

Merci beaucoup pour ton aide. Grace à ton explication et quelques recherche j'ai pu faire ceci :

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
30
31
import React, { Component, useState }  from 'react'
 
function TheOneWhoHasTheState() {
    const [count, setCount] = useState(0);
    let NumberCount = () => {
      setCount(count + 1);
    };
    return (
      <div>
        <p>Counter is now {count}</p>
        <TheButton onClck={NumberCount} />
      </div>
    );
  }
 
  const TheButton = ({ onClck }) => (
    <div onClick={onClck}> Click here to add </div>
  );
 
 
 
    class Txtcount extends Component {
 
        render () {
            return (
                <TheOneWhoHasTheState/>
            )
        }
    }
 
    export default Txtcount;

ce que je voulais apprendre et pousser encore plus loin dans les prochains tests est de pouvoir utiliser une function qui utilise un hook dans une autre function


ce component

Code js :

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

1
2
3
  const TheButton = ({ onClck }) => (
    <div onClick={onClck}> Click here to add </div>
  );

est appelé par :

Code js :

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

<TheButton onClck={NumberCount} />

Mi du temps à chercher pour y arrive mais j y suis. J'ai volontairement changer onClick par onClck pour que je comprenne bien la différence entre les onClick et qui fait quoi

Merci encore et petite question, quel est ton métier @gwyohm ?