入力テキストの値を表示する際の空白

Question

Reactを学びたいと思っています。現在、フォームアプリケーションを構築しています。入力フィールドに値を入力した後にテストするようにしています。私は問題があるようです。例 "Ab"と入力すると、コンソールログに空白が表示され、Aと "b"は表示されません。これには説明がありますか？ここで

は私のコード

function Text(props) { 
 
    var style = { 
 
    paddingTop: 5, 
 
    margin: 5 
 
    }; 
 
    return (
 
    <div> 
 
     <div style={style}> {props.label} </div> 
 
     <input 
 
     type="text" 
 
     style={style} 
 
     value={props.labelInputText} 
 
     onChange={props.changeHandler} 
 
     /> 
 
    </div> 
 
); 
 
} 
 
class FormApp extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     firstName: "" 
 
    }; 
 
    this.changeHandler = this.changeHandler.bind(this); 
 
    } 
 
    changeHandler(event) { 
 
    this.setState({ firstName: event.target.value }); 
 
    console.log(this.state.firstName); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <Text 
 
      label="First Name" 
 
      labelInputText={this.state.firstName} 
 
      changeHandler={this.changeHandler} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<FormApp/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 1

setStateが非同期です。コールバックメソッドを使用すると、更新された状態を取得できます。 `this.setState（{ \t \tのfirstName：event.target.value \t}、（）=> { \tはconsole.log（この

changeHandler(event) { 
    this.setState({ firstName: event.target.value },() => 
    console.log(this.state.firstName)); 
}