Meine React-Komponente bricht ab, wenn ich this.state verwende

Question

Ich versuche, eine einfache React-Komponente zu schreiben, die die Anzahl der in ein Textfeld eingegebenen Zeichen zählt. Die Komponente wird zwar gerendert, aber wenn ich versuche, auf this.state zu verweisen, bricht die Komponente ab und der Bildschirm ist leer.

Hier ist der 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")) 

Das Problem ist mit {this.state.text. Länge} Dinge machen, wenn diese Zeile {this.props.text.length} geändert wird

Answer 1

Reagieren ES6 Klassen haben noch keine eigene getInitialState() Funktion, müssen Sie die constructor Funktion verwenden, um Ihren Ausgangszustand zu setzen:

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

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

Oder Sie wechseln zurück zu React.createClass()

Answer 2

Es gibt ein paar Noten waren so zu machen, ich werde einfach neu zu schreiben und kommentieren, wie ich gehen.

Ich habe es nicht getestet, aber das sollte funktionieren.

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 
    }) 
    } 

Der Wert eines TextArea- Element zwischen <textarea> und </textarea>. Nicht als 'Wert'-Attribut gespeichert, so wie Sie es ursprünglich hatten.

Als nächstes sollte dieser Wert STATE nicht PROPS sein, da es aktualisiert werden muss.

Schließlich haben Sie wahrscheinlich Probleme, weil in HandleChange this nicht korrekt gebunden ist. Ich habe es durch '() => this.handleChange()' ersetzt, weil der Fettpfeil in ES6 (=>) das für dich repariert.

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"))