使用动态表单处理更新特定状态对象上的状态？

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 
}