如何在 React 中使用 e.target.name 更新嵌套状态属性答案

【问题标题】：How to update a nested state properties with e.target.name in React如何在 React 中使用 e.target.name 更新嵌套状态属性
【发布时间】：2020-12-04 17:57:03
【问题描述】：

我正在尝试使用这样的嵌套属性来更新状态：

State = {
  newProperty: {
    name: '',
    description: '',
    guestCount: '',
  }
}

我正在像这样更新状态：

handleOnChangeInput = (e) => {
    let prevState = Object.assign({}, this.state.newProperty)
    let targetName = e.target.name
    preState.targetName  = e.target.value
    this.setState({ newProperty: prevState })
}

但是，preState 不获取 targetName 的值，而是在状态中查找 targetName 属性。我尝试了不同的变体，例如 preState.[targetName]，但它仍然不起作用。

【问题讨论】：

您的 newProperty 对象具有字段 name，但您尝试设置 targetname??
您的语法刚刚关闭。要使用计算对象属性，您可以使用数组语法访问该对象：obj[computed_property]。

标签： javascript reactjs state setstate

【解决方案1】：

如果它是一个新属性，如上所示，用方括号括起来，但去掉 .

任何 JSON 更新的原理都是一样的。以下是上述内容的示例：

state = {
    newProperty: {
        name: '',
        description: '',
        guestCount: '',
    }
}

handleOnChangeInput = (e) => {
        let prevState = Object.assign({}, state.newProperty)
        let targetName = e.name
        prevState[targetName]  = e.value
        state.newProperty = prevState
        console.log(state)
}

&lt;input name="name" id="waffles" onchange="handleOnChangeInput(this)"/&gt;

【讨论】：