ReactJs Druckwert des Eingabefeldes

Question

Ich versuche sofort meinen Eingabewert in der Renderfunktion zu drucken. Aber jetzt schaue ich diesen Link an: https://facebook.github.io/react/docs/state-and-lifecycle.html

Hier verwenden sie einen Konstruktor mit Super (Requisiten) und setzen dann den Zustand.

aber wenn ich versuche dies:

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = {text: ''}; 
    }; 

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

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {this.state.text}.</h2> 

     <input type="text" onKeyUp={this.handleChange} /> 
     </div> 
    ); 
    } 
} 

Es wirft mir diesen Fehler: Uncaught TypeError: Cannot read property 'state' of undefined

Wie kann ich dieses Problem lösen.

Answer 1

Wenn Sie eine Funktion wie diese aufrufen, wird sie vom Fenster aufgerufen, nicht von Ihrem reagierenden Objekt.

die Funktion zu machen, um Ihr Objekt reagieren gebunden sein (und haben die Fähigkeit, die setState Methode zu verwenden, müssen Sie diese verwenden:

onKeyUp={this.handleChange.bind(this)}

this es zu Ihrem Objekt reagieren binden :)

Answer 2

Sie haben wie diese this zu Ihrem Event-Handler zu binden:

<input type="text" onKeyUp={this.handleChange.bind(this)} /> 

W Orking Beispiel: https://codepen.io/shanedaugherty/pen/ALwAzL