React - Status ist inkonsistent

Question

Was ich erreichen möchte: Daten vom Kind zum Eltern übergeben.

Wie ich versuche, es zu erreichen:this.state Verwendung als here

Nicht sicher beschrieben, wie der Titel zu Wort: Wenn ich console.log(this.state) in der Funktion, in der ich den Zustand ändern, die korrekten Werte in this.state werden ausgedruckt. Wenn ich jedoch versuche, den Status in einer anderen Funktion zu lesen, ist this.state scheinbar immer noch auf leere Werte.

constructor(props) { 
    super(props); 
    this.state = { 
     titleInputValue: "", 
    }; 
} 

<form onSubmit={this.handleSubmit.bind(this)}> 
    <TextInput 
     val={this.state.titleInputValue} 
     changeHandler={this.textInputChangeHandler} /> 
</form> 


// This is the function which can apparently only get the initial state 
// title and body are empty strings, they should have values 
handleSubmit(event) { 
    event.preventDefault(); 
    const title = this.state.titleInputValue; 
    const body = this.state.bodyInputValue; 
    console.log(this.state); 
    Meteor.call('stories.insert',title,body); 
} 

// However, here the state is retrieved just fine. 
// This is the function the child calls to update the state. 
textInputChangeHandler(event) { 
    // This console.log call shows the correct state! 
    console.log(this.state); 
    this.setState({ 
     titleInputValue: event.target.value, 
    }); 
} 

TextInput hat onChange={this.props.changeHandler.bind(this)}

Zur Illustration Attribut:

Ich schrieb asd, und der Staat erfolgreich in textInputChangeHandler abgerufen wurde, die die ersten beiden console.log Anrufe, aber dann es ist leer in .

Answer 1

Dies liegt daran, dass der Ereignishandlerbereich keine Klasse der Komponentenklasse ist. Wenn Ihre Komponente das Ereignis behandelt, ist der Kontext die Komponente (in Ihrem Fall TextInput) und nicht die übergeordnete Komponente.

Sie haben diese Funktion dazu der Komponente Klassenbereich zu binden:

<TextInput 
     val={this.state.titleInputValue} 
     changeHandler={this.textInputChangeHandler.bind(this) } /> 

Verwendung von JavaScript binden Sie die Funktion Kontext als auch angeben können.