编辑:这是副本,看这里
我找不到任何在设置状态时使用动态键名的例子。这就是我想做的:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
其中event.target.id用作要更新的状态键。这在React中是不可能的吗?
编辑:这是副本,看这里
我找不到任何在设置状态时使用动态键名的例子。这就是我想做的:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
其中event.target.id用作要更新的状态键。这在React中是不可能的吗?
当前回答
我一直在寻找一个漂亮而简单的解决方案,我发现了这个:
this.setState({ [`image${i}`]: image })
希望这能有所帮助
其他回答
在ES6+中,你只需要执行[${variable}]
感谢@Cory的提示,我用了这个:
inputChangeHandler : function (event) {
var stateObject = function() {
returnObj = {};
returnObj[this.target.id] = this.target.value;
return returnObj;
}.bind(event)();
this.setState( stateObject );
},
如果使用ES6或Babel transpiler转换你的JSX代码,你也可以通过计算属性名来完成:
inputChangeHandler : function (event) {
this.setState({ [event.target.id]: event.target.value });
// alternatively using template strings for strings
// this.setState({ [`key${event.target.id}`]: event.target.value });
}
我一直在寻找一个漂亮而简单的解决方案,我发现了这个:
this.setState({ [`image${i}`]: image })
希望这能有所帮助
可以使用扩展语法,像这样:
inputChangeHandler : function (event) {
this.setState( {
...this.state,
[event.target.id]: event.target.value
} );
},
当给定元素为对象时:
handleNewObj = e => {
const data = e[Object.keys(e)[0]];
this.setState({
anykeyofyourstate: {
...this.state.anykeyofyourstate,
[Object.keys(e)[0]]: data
}
});
};
希望它能帮助到别人