顯示輸入文本值時的空白區域

我一直在嘗試學習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>

來源

2017-08-01 Ndx

它寫入這樣它將打印該更新的狀態值：'this.setState（{ \t \t姓：event.target.value \t}，（）=> { \t的console.log（此.state.firstName） } ）' –

它的工作！謝謝！ setState（）是異步的，因此可以解釋它。 – Ndx

setState是異步的。您可以使用回調方法來獲取更新的狀態。

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

來源

2017-08-01 15:51:59

顯示輸入文本值時的空白區域

回答

相關問題