显示输入文本值时的空白区域
问题描述:
我一直在尝试学习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>
答
setState
是异步的。您可以使用回调方法来获取更新的状态。
changeHandler(event) {
this.setState({ firstName: event.target.value },() =>
console.log(this.state.firstName));
}
它写入这样它将打印该更新的状态值:'this.setState({ \t \t姓:event.target.value \t},()=> { \t的console.log(此.state.firstName) } )' –
它的工作!谢谢! setState()是异步的,因此可以解释它。 – Ndx