Question

我正在尝试动态接受来自中等大小形式的状态更改，而不需要＆＃34;硬编码＆＃34;每个输入的名称。问题是我的州有不同的类别，例如：

this.state = {
  data: {

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

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

父母的孩子渲染：

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

我为子组件创建了一个onChange prop，它调用了一个子方法

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

My Child组件的更改处理程序就像这样

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

我不太确定如何处理Parent组件的状态更新功能。

我将有两个处理程序，一个用于＆＃34;帐户＆＃34;和＃34;生物＆＃34;因为他们将使用不同的验证，所以我将它们分开但是为了这个例子，我只是尝试更新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
}

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

1 个答案: