编辑:这是副本，看这里
我找不到任何在设置状态时使用动态键名的例子。这就是我想做的:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
其中event.target.id用作要更新的状态键。这在React中是不可能的吗?
当前回答
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
});
请注意引号。
其他回答
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
});
请注意引号。
你的状态与字典更新一些键而不丢失其他值
state =
{
name:"mjpatel"
parsedFilter:
{
page:2,
perPage:4,
totalPages: 50,
}
}
解决方案如下
let { parsedFilter } = this.state
this.setState({
parsedFilter: {
...this.state.parsedFilter,
page: 5
}
});
这里更新键“page”的值为5
可以使用扩展语法，像这样:
inputChangeHandler : function (event) {
this.setState( {
...this.state,
[event.target.id]: event.target.value
} );
},
当需要处理多个受控输入元素时，可以向每个元素添加一个name属性，并让处理程序函数根据event.target.name的值选择要做什么。
例如:
inputChangeHandler（event） { this.setState（{ [event.target.name]： event.target.value }）; }
当给定元素为对象时:
handleNewObj = e => {
const data = e[Object.keys(e)[0]];
this.setState({
anykeyofyourstate: {
...this.state.anykeyofyourstate,
[Object.keys(e)[0]]: data
}
});
};
希望它能帮助到别人
