Mon composant React se casse quand j'utilise this.state

Question

J'essaye d'écrire un composant React simple qui compte la quantité de caractères entrés dans un champ de texte. Le composant est rendu bien, mais quand j'essaie de référencer this.state, le composant se casse et l'écran est vide.

Voici le code:

HTML:

<div id="content"> 

</div> 

CSS:

#content { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

body { 
    background-color: #F1FAEE; ; 
} 

h1 { 
    font-family: Avenir; 
    color: black; 
    font-size: 44px; 
} 

JavaScript:

class Box extends React.Component { 

    getInitialState() { 
    return { 
     text: this.props.text 
    } 
    } 

    handleChange(event) { 
    this.setState({ 
     text: event.target.value 
    }) 
    } 

    render() { 
    return (
     <div> 
     <h1>This App Counts Letters</h1> 
     <textarea value = {this.props.text} onChange = {this.handleChange}> </textarea> 
     <h1>{this.state.text.length}</h1> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<Box text = "I find this frustrating"/>,document.getElementById("content")) 

La question est avec {this.state.text. longueur} choses rendent si cette ligne est modifiée pour {this.props.text.length}

Answer 1

React cours ES6 de ne pas avoir une fonction getInitialState(), vous devez utiliser la fonction constructor pour définir votre état initial:

constructor(props) { 
    super(props); 
    this.state = {text: props.text}; 
} 

https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Ou vous revenez à React.createClass()

Answer 2

Il y avait deux ou trois notes pour faire donc je vais juste re-écriture et de commentaires que je vais.

Je ne l'ai pas testé, mais cela devrait fonctionner.

class Box extends React.Component { 

    // getInitialState() {} should be replaced in ES6 with: 
    constructor(props) { 
    super(props); 
    this.state = { 
     text: props.text 
    } 
    } 

    // This looks good. 
    handleChange(event) { 
    this.setState({ 
     text: event.target.value 
    }) 
    } 

La valeur d'un élément de zone de texte est comprise entre <textarea> et </textarea>. Non stocké en tant qu'attribut 'value' comme vous l'aviez initialement.

Ensuite, cette valeur doit être STATE et non PROPS car elle doit être mise à jour.

Enfin, vous avez probablement des problèmes car dans handleChange, this n'est pas lié correctement. Je l'ai remplacé par '() => this.handleChange()' parce que la grosse flèche dans ES6 (=>) va corriger cela pour vous.

render() { 
    return (
     <div> 
     <h1>This App Counts Letters</h1> 
     <textarea onChange = {() => this.handleChange()}>{this.state.text}</textarea> 
     <h1>{this.state.text.length}</h1> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<Box text = "I find this frustrating"/>,document.getElementById("content"))