您何时记录状态?请记住,这setState
是异步的,因此,如果要打印 新 状态,则必须使用callback参数。想象一下这个组件:
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);
}
});
d
在输入末尾键入a 将导致以下内容记录到控制台:
Value from event: abcd
New state DIRECTLY after setState: abc
New state in ASYNC callback: abcd