编辑:这是副本,看这里
我找不到任何在设置状态时使用动态键名的例子。这就是我想做的:
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中是不可能的吗?
当前回答
我是怎么做到的…
inputChangeHandler: function(event) {
var key = event.target.id
var val = event.target.value
var obj = {}
obj[key] = val
this.setState(obj)
},
其他回答
在ES6+中,你只需要执行[${variable}]
你的状态与字典更新一些键而不丢失其他值
state =
{
name:"mjpatel"
parsedFilter:
{
page:2,
perPage:4,
totalPages: 50,
}
}
解决方案如下
let { parsedFilter } = this.state
this.setState({
parsedFilter: {
...this.state.parsedFilter,
page: 5
}
});
这里更新键“page”的值为5
在.map的循环中工作如下:
{
dataForm.map(({ id, placeholder, type }) => {
return <Input
value={this.state.type}
onChangeText={(text) => this.setState({ [type]: text })}
placeholder={placeholder}
key={id} />
})
}
注意type参数中的[]。 希望这对你有所帮助。
当需要处理多个受控输入元素时,可以向每个元素添加一个name属性,并让处理程序函数根据event.target.name的值选择要做什么。
例如:
inputChangeHandler(event) { this.setState({ [event.target.name]: event.target.value }); }
我一直在寻找一个漂亮而简单的解决方案,我发现了这个:
this.setState({ [`image${i}`]: image })
希望这能有所帮助