Question

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

Answer 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')

Answer 2

这有很多方法可以达到你想要的效果。其中之一是你可以为业余爱好创建另一个处理程序。所以你的输入就像：

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

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

2 个答案: