在React JS中设置状态

Question

我的组件状态如下所示：

  this.state = { 
        user: {firstname: '', lastName: '', phoneNumber: '' }
     }

关于输入更改事件，我想设置状态。但是下面的代码似乎没有用。我愚蠢地做错了什么？

 handlePhoneNumberChange(e){
     this.setState({["users"]['phoneNumber']: e.target.value});
  }

Answer 1

您应该更新这样的状态：

handlePhoneNumberChange(e) {
   let user = this.state.user;
   user.phoneNumber = e.target.value;
   this.setState(user);
}

您可能还需要查看ES6 spread properties，这会显着清理此过程。

编辑：将“传播操作员”更改为“传播属性”，感谢Felix。

Answer 2

我不确定你在做什么，但是如果你想设置当前用户的电话号码：

this.setState({ user: { ...this.state.user, phoneNumber: e.target.value } })

假设您可以访问传播等实验性ES功能。

否则，

this.setState({ user: Object.assign({}, this.state.user, {phoneNumber: e.target.value}) })