Modification code d'un tutorial

Version imprimable

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:

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:

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

26/03/2020, 10h47
gwyohm

Salut,

Citation:

Envoyé par Huyenlong

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 ?

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:

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.

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:

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:

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

ou

Code:

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

Code:

<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:

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,

Citation:

Mais j'ai une erreur.

Quelle erreur ?

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

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:

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

Code:

<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 :D

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