javascript - 表单数据不会使用 onChange() 绑定(bind)到 React 组件

Question

我一直在为自己编写一个电子邮件服务，但在输入表单数据时陷入了这个 React 表单不改变状态的困境。找到了此 React 表单未通过 onChange() 更改状态的主要问题...

如何将状态绑定(bind)到每次击键时都会更新的 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>
);

}

}'''

Answer 1

您没有更改状态中的实际表单值。这一行: this.setState({ value: event.target.value }); 更改状态中 value 键的值。因此，如果您要调用此 this.setState({ value: 'potato' }); 那么您的状态将如下所示:

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

因此，您需要将要更改的实际字段名称传递到 onChange 函数中。那是另一回事，你有一个错字。该处理程序称为 onChange，采用驼峰式大小写。你的全是小写，这是错误的。

这是更新“名称”字段的正确示例。首先，将您的 handleChange 函数更新为:

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

然后将您的输入更改为如下所示:

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