如何在对象中使用动态属性

时间:2017-08-07 04:53:20

标签: javascript reactjs ecmascript-6

我有一个handleInputBlur函数,它有一个动态参数。假设我有this.props.user这样的对象

{ name: 'abc', age: 10 }

然后在我的用户界面中,我可以进行内联编辑,因此handleInputBlur将获得一个名为changeField的参数,该参数将是包含已更改字段的对象:

{ age: 10 }

我仍然需要将整个对象传回后端,如何用现有对象替换更新的字段?

我尝试了这个但是出现了意外的令牌错误:

handleInputBlur = (changedField) => {

    const existingUser = this.props.user

    const updatedUserObj = Object.assign({}, existingUser, {
        existingUser[changedField]: changedField
    })
}

如何根据changedField的键和值更新现有用户?

1 个答案:

答案 0 :(得分:1)

使用computed property names围绕作为带括号的表达式的键,以便将其计算值用作键:

const key = Object.keys(changedField)[0];
const updatedUserObj = Object.assign({}, existingUser, {
    [key]: changedField[key]
})

首先,将计算表达式key的值,然后将该值用作键。请注意,Object.keys(changedField)[0]key的值。这样做是获取changedField对象中的第一个键 - 正在更改的属性,例如'name''age'。然后,通过访问changedField中第一个键的值,将该属性设置为新属性的值。