将键传递给object以更新嵌套属性值

时间:2017-03-07 05:08:20

标签: javascript reactjs

我将状态存储在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"}

2 个答案:

答案 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=""/>