是否有可能更新对象的属性与setState?
喜欢的东西:
this.state = {
jasper: { name: 'jasper', age: 28 },
}
我试过:
this.setState({jasper.name: 'someOtherName'});
这:
this.setState({jasper: {name: 'someothername'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
是否有可能更新对象的属性与setState?
喜欢的东西:
this.state = {
jasper: { name: 'jasper', age: 28 },
}
我试过:
this.setState({jasper.name: 'someOtherName'});
这:
this.setState({jasper: {name: 'someothername'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
你可以试试这个: (注:输入标签的名称===对象字段)
<input name="myField" type="text"
value={this.state.myObject.myField}
onChange={this.handleChangeInpForm}>
</input>
-----------------------------------------------------------
handleChangeInpForm = (e) => {
let newObject = this.state.myObject;
newObject[e.target.name] = e.target.value;
this.setState({
myObject: newObject
})
}
其他回答
你可以试试这个: (注:输入标签的名称===对象字段)
<input name="myField" type="text"
value={this.state.myObject.myField}
onChange={this.handleChangeInpForm}>
</input>
-----------------------------------------------------------
handleChangeInpForm = (e) => {
let newObject = this.state.myObject;
newObject[e.target.name] = e.target.value;
this.setState({
myObject: newObject
})
}
使用钩子,我们可以做到以下方式
const [student, setStudent] = React.useState({name: 'jasper', age: 28});
setStudent((prevState) => ({
...prevState,
name: 'newName',
}));
这里使用展开运算符和一些ES6
this.setState({
jasper: {
...this.state.jasper,
name: 'something'
}
})
在更新对象的情况下,键是字符串
例如,你的状态对象是
serviceDays: {
Sunday: true,
Monday: true,
Tuesday: false,
Wednesday: true,
Thurday: false,
Friday: true,
Saturday: true
}
所以你可以通过以下方式更新
const onDayClick = day => {
const { serviceDays } = this.state
this.setState(prevState => ({
serviceDays: {
...prevState.serviceDays,
[day]: serviceDays[day] ? false : true
}
}))
}
这是最快和最易读的方式:
this.setState({...this.state.jasper, name: 'someothername'});
即使this.state.jasper已经包含了name属性,也会使用新名称name: 'someothername'。