onChange或onKeyUp事件采用ReactJS中的上一个值
onChange或onKeyUp事件采用ReactJS中的上一个值
提问于 2019-04-10 20:33:35
我已经在ReactJS中创建了表单。我在{key : value}成对的公共方法中获取值。但是我在方法中得到了之前的值。
constructor(props) {
super(props);
{
this.state = { name: "", age: 0 };
}
}
inputChange = (key, value) => {
this.setState({ [key] : value });
console.log(this.state);
}
render() {
return (
<form>
<div>
Name : <input type="text" name="name" onKeyUp={(e) => this.inputChange('name', e.target.value)}></input>
</div>
<div>
Age : <input type="text" name="age" onKeyUp={(e) => this.inputChange('age', e.target.value)}></input>
</div>
</form>
)
}为了更好的理解，我附上了截图。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-10 20:36:55
setState会将状态更改排入队列，但它不会立即发生。如果您需要在状态更改后执行某些操作，可以将第二个回调参数传递给setState
inputChange = (key, value) => {
this.setState({ [key] : value }, () => {
console.log(this.state);
});
}Stack Overflow用户
发布于 2019-04-10 20:49:14
这将完全满足您的需求。
class App extends Component {
constructor(props){
super(props)
this.state = {
name: '',
age: ''
}
}
handleInput(option, event){
if (option === 'name') {
this.setState({
name: event.target.value
}, () => {
console.log("Name: ", this.state.name)
});
}
else if (option === 'age'){
this.setState({
age: event.target.value
}, () => {
console.log("Age: ", this.state.age)
});
}
}
render() {
return (
<div>
<div>
<header>Name: </header>
<input type="text" onChange={this.handleInput.bind(this, 'name')}/>
<header>Age: </header>
<input type="text" onChange={this.handleInput.bind(this, 'age')}/>
</div>
</div>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55612692
复制相关文章
相似问题
腾讯云开发者
