使用動態表單處理更新特定狀態對象上的狀態？

Question

我試圖動態接受從一箇中等大小的形式的狀態變化沒有「硬編碼」每個輸入的名稱。問題是我的國家有不同的類別，例如：

this.state = { 
    data: { 

    account: { 
     email: "", 
     username: "" 
    }, 

    bio: { 
     location: "", 
     bio: "" 
    } 
    } 
} 

家長給予孩子：

return <Child onChange={this.handleBioChange} info={this.state.data.bio} /> 

我已經創建了一個孩子組成一個onchange道具調用孩子的方法

<input 
    value={this.props.info.location.value} 
    onChange={this.handleChange} 
    name="bio.location" 
/> 

我的孩子組成的變化處理程序是，像這樣

handleChange(event) { 
    this.props.onChange(event) 
} 

我不太確定如何處理父組件的狀態更新函數。

我將有兩個處理程序，一個用於「帳戶」，另一個用於「生物」，因爲他們將使用不同的驗證，因此我將它們分開，但爲了這個示例，我只試圖更新bio狀態。

我曾嘗試：

handleBioChange(event){ 
    let name = event.target.name 
    let value = event.target.value 

    this.setState([name]: value) 
} 

，但我這樣做的時候，狀態不會被更新，因此不會讓我改變輸入的值。我在這裏錯過了什麼？

Answer 1

的setState工作如下

簡單的變量：

handleBioChange(event){ 
    let name = event.target.name 
    let value = event.target.value 

    // this.setState([name]: value) 

    this.setState({ location: name, bio: value }) // if location and bio are normal var 
} 

不知道你的邏輯部分，什麼是生物和位置。但分配值聲明

this.setState({name : value}) 

語法使用，其中name是狀態變量名和value，我們要分配給它。

爲對象：

handleBioChange(event){ 
    let name = event.target.name 
    let value = event.target.value 

    const bioLocation = this.state.bio; // get bio object 
    bioLocation.location = name; // assign values 
    bioLocation.bio = value; // assign values 
    this.setState({bio: bioLocation}); // update object 
}