时间戳

首页 > 解决方案 > 为什么在反应中更新状态时状态会以这种方式表现

javascript - 为什么在反应中更新状态时状态会以这种方式表现

问题描述

我有我的状态

this.state = {
      data: [],
      dataloaded: false,
      isopen: false,
      firstname: '',
      lastname:'',
      email:'',
      gender: '',
      avatar: '',
      number:'',
      dob:new Date()
    };

我有更新状态的表格，
每个文本输入都有这样的 onchangeonChange={this.handleOnChange("firstname")}
我的 hndleOnChange 函数是：

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({field: event.target.value})
  }

这不起作用 这不是更新状态，但如果我这样做

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({[field]: event.target.value})
  }

这行得通

为什么在对象名前面添加括号会正确？

标签： javascriptreactjsecmascript-6

解决方案

添加括号意味着该value变量的 成为对象键。如果没有括号，文字名称将成为对象键。举个例子：

const key = "name";

const object = {
    key: "My Key",
    name: "My Name"
};

obj.key // "My Key"
obj[key] // "My Name" -> equivalent to obj["name"] or object.name

查看 MDN 的使用对象了解更多信息。

在您的情况下，此代码：

handleOnChange = field => event => {
    console.log(event.target.value,field)
    this.setState({field: event.target.value})
}

正在尝试设置一个名为 的状态属性field，而不是与字段变量的值关联的状态属性。

推荐阅读