onChange in Reaktion nicht das letzte Zeichen des Textes erfassen

Question

Diese Funktion meiner machen ist:

render: function() { 
    return <div className="input-group search-box"> 
       <input 
       onChange={this.handleTextChange} 
       type="text" 
       value={this.state.text} 
       className="form-control search-item" /> 
       <span className="input-group-btn"></span> 
     </div> 
    } 

und ich habe dies als meine Event-Handler:

handleTextChange: function(event) { 
    console.log(event.target.value); 
    this.setState({ 
     text: event.target.value 
    }); 
    } 

Das Problem ist, dass, wenn ich "speichere" ein Element, oder console.log drucke die Ausgabe, das letzte Zeichen fehlt - zum Beispiel, wenn ich "zuerst" eingebe, bekomme ich "Tannen" ausgedruckt, und es muss ein anderes Schlüsselereignis erfasst werden das letzte Zeichen. Ich habe versucht onKeyUp - die mich nichts eingibt, und ich habe auch versucht onKeyDown und onKeyPress, die nichts ausgeben. Was passiert hier und warum? und wie kann ich diesen letzten Charakter bekommen?

Answer 1

Wann protokollieren Sie den Status? Denken Sie daran, dass setState asynchron ist. Wenn Sie also den neuen Status drucken möchten, müssen Sie den Rückrufparameter verwenden. Stellen Sie sich vor, diese Komponente:

let Comp = React.createClass({ 
    getInitialState() { 
    return { text: "abc" }; 
    }, 

    render() { 
    return (
     <div> 
     <input type="text" value={this.state.text} 
       onChange={this.handleChange} /> 
     <button onClick={this.printValue}>Print Value</button> 
     </div> 
    ); 
    }, 

    handleChange(event) { 
    console.log("Value from event:", event.target.value); 

    this.setState({ 
     text: event.target.value 
    },() => { 
     console.log("New state in ASYNC callback:", this.state.text); 
    }); 

    console.log("New state DIRECTLY after setState:", this.state.text); 
    }, 

    printValue() { 
    console.log("Current value:", this.state.text); 
    } 
}); 

eine d am Ende des Eingangs Typing führt in die an der Konsole angemeldet folgenden werden:

Value from event: abcd 
New state DIRECTLY after setState: abc 
New state in ASYNC callback: abcd 

Beachten Sie, dass der mittlere Wert das letzte Zeichen fehlt. Here's a working example.