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

Question

我有我的状态

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

这有效

为什么在 objectname 前面添加括号它会正确？

Answer 1

添加括号意味着该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，而不是与字段变量的值关联的状态属性。