当我写入input元素时,它触发onInputChange()
函数,更新inputValue
状态,然后调用getValue()
,获取inputValue
状态并登录控制台。呈现的值与控制台中的值不同,这是怎么回事?
可重现示例:https://stackblitz.com/edit/react-i4wprk?file=src%2FApp.js
import React from 'react';
import './style.css';
export default class App extends React.Component {
constructor() {
super();
this.state = {
inputValue: '',
};
}
getValue = () => {
const { inputValue } = this.state;
console.log(inputValue);
};
onInputChange = (event) => {
const inputValue = event.currentTarget.value;
this.setState({ inputValue });
this.getValue();
};
render() {
const { inputValue } = this.state;
return (
<div>
<input placeholder="texto" onInput={this.onInputChange} />
<p>{inputValue}</p>
</div>
);
}
}
1条答案
按热度按时间kb5ga3dv1#
setState
不是同步调用,因此无法保证在状态中更新该值后会触发控制台日志。