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

Question

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

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]，但仍然没有用。

javascript反应状态设置状态

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

}

<input name="name" id="waffles" onchange="handleOnChangeInput(this)"/>