React 中setState({key:value}) key值动态变化,如何动态设置key的值
第一种写法:
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
age: '',
sex:''
}
}
handleChange(field, e) {
this.setState({
[field]: e.target.value
})
setTimeout(() => {
console.log(this.state)
}, 10)
}
render() {
return (
<div>
<input onChange={this.handleChange.bind(this, 'username')}></input>
<input onChange={this.handleChange.bind(this, 'age')}></input>
<input onChange={this.handleChange.bind(this, 'sex')}></input>
</div>
);
}
}
export default App;
第二种写法:
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
age: '',
sex:''
}
}
handleChange(field, e) {
let data = {}
data[field] = e.target.value
this.setState(data)
setTimeout(() => {
console.log(this.state)
}, 10)
}
render() {
return (
<div>
<input onChange={this.handleChange.bind(this, 'username')}></input>
<input onChange={this.handleChange.bind(this, 'age')}></input>
<input onChange={this.handleChange.bind(this, 'sex')}></input>
</div>
);
}
}
export default App;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步