Javascript 表格数据赢得'；t使用onChange（）绑定到React组件

我一直在为自己编写一个电子邮件服务，在输入表单数据时，我被困在这个React表单上，状态不变。通过onChange（）跟踪此React表单未更改状态的主要问题

如何将状态绑定到每次击键时更新的React表单？使用此表单数据稍后传递到API调用

''”
类AddContact扩展组件{

constructor(props) {
  super(props);
  this.state = {
  'name': '',
  'company': '',
  'linkedin': '',
  'department': '',
  'email': 'Not available'
}

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({ value: event.target.value });
  }

handleSubmit(event) {
}

render() {
return(
  <div>
    <form onSubmit = {this.handleSubmit}>
    <label>
      Name
      <input type="text" value={this.state.name} onchange = {this.handleChange}/>
    </label>
    <label>
      Company
      <input type="text" value={this.state.company} onchange = {this.handleChange}/>
    </label>
    <label>
      LinkedIn Profile
      <input type="text" value={this.state.linkedin} onchange = {this.handleChange}/>
    </label>
    <label>
      Department
      <input type="text" value={this.state.department} onchange = {this.handleChange}/>
    </label>
    <label>
      Email (Optional)
      <input type="text" value={this.state.email} onchange = {this.handleChange}/>
    </label>

        <input type="submit" value="Submit" />
    </form>
  </div>
);

}

构造函数（道具）{
超级（道具）；
此.state={
“姓名”：“，
“公司”：“，
“linkedin”：“，
“部门”：“，
“电子邮件”：“不可用”
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
}
render（）{
返回(
名称
单位
LinkedIn个人资料
部门
电子邮件（可选）
);
}

}

---

''

您没有更改状态中的实际表单值。此行：

This.setState（{value:event.target.value}）更改状态下
值
键的值。因此，如果要调用this
this.setState（{value:'potato'}）然后您的状态将如下所示：

this.state = {
  'name': '',
  'company': '',
  'linkedin': '',
  'department': '',
  'email': 'Not available',
  'value': 'potato'
}

<input type="text" value={this.state.name} onChange={e => this.handleChange('name', e.target.value)}/>

因此，您需要将要更改的实际字段名传入
onChange
函数。还有一件事，你有打字错误。处理程序被称为
onChange
，带有驼峰大小写。你的全是小写

下面是一个更新“name”字段的正确示例。首先，将
handleChange
函数更新为：

handleChange(field, value) {
     this.setState({ [field]: value });
}

然后将输入更改为如下所示：

this.state = {
  'name': '',
  'company': '',
  'linkedin': '',
  'department': '',
  'email': 'Not available',
  'value': 'potato'
}

<input type="text" value={this.state.name} onChange={e => this.handleChange('name', e.target.value)}/>

this.handleChange（'name'，e.target.value）}/>
非常感谢，为我的错误道歉ignorance@kkang2097别担心。如果这回答了您的问题，请使用向下箭头下的勾号将其标记为正确答案