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