显示输入文本值时的空白区域

我一直在尝试学习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

显示输入文本值时的空白区域

回答

相关问题