我将状态存储在input
中,在我下面的onChange函数中
input[e.target.name] = e.target.value;
它有效,它会有
{"name":"james"}
如果我有这样的输入标签
<input name='name' onChange={this.handleChange} defaultValue=""/>
但是如果我的初始输入状态有嵌套属性怎么办?
{
"name": "alice",
"hobby": {
"outdoor": "hiking",
"indoor": "reading"
}
}
如果我将输入名称attr作为名称=&#39; hobby.outdoor&#39;输入状态对象无效
{"name":"james", "hobby.outdoor":"something"}
答案 0 :(得分:1)
你可以像这样使用setState
:
var state = {
hobby: {
outdoor: null
}
};
function setState(target, value) {
var parts = target.split('.');
parts.reduce(function (res, p, i) {
return i === parts.length - 1 ? (res[p] = value) : res[p];
}, state);
}
setState('hobby.outdoor', 'smoking')
答案 1 :(得分:0)
这有很多方法可以达到你想要的效果。其中之一是你可以为业余爱好创建另一个处理程序。所以你的输入就像:
<input name='name' onChange={this.handleChange} defaultValue=""/>
<input name='outdoor' onChange={this.handleHobbyChange} defaultValue=""/>
然后你可以更新handleHobbyChange
input.hobby[e.target.name] = event.target.value
另一种方法是你可以用正则表达式或hobby.outdoor
来解析String.prototype.split
,但我不会这样推荐。
如果句柄有许多嵌套输入,则可以将处理程序作为高阶函数(函数创建函数)。例如:
const handle = (inputName) => (e) => {
input[inputName][e.target.name] = e.target.value // or use setState here
}
并像
一样使用它<input name='outdoor' onChange={this.handle('hobby')} defaultValue=""/>