在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傳播屬性 ，該屬性可以大大清除此過程。

編輯：謝謝Felix，將“ spread operator”更改為“ spread properties”。

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