如何使用React+Bootstrap提交Modal表单数据并解决对应报错

问题原因 #

• 核心报错是this指向丢失导致的，具体存在以下问题：

1. 方法绑定错误：你在constructor中执行了this.onSubmit = this.handleSubmit.bind(this)，但实际在Modal和提交按钮上调用的还是未绑定的handleSubmit方法，类普通方法在严格模式下默认this为undefined，访问this.state自然会抛出异常。
2. 方法绑定遗漏：handleModalShowHide也是类普通方法，调用时同样存在this指向丢失的隐患。
3. 状态初始值异常：institutionName/institutionAddress/institutionPhone初始值设为了空对象，但handleChange写入的是字符串，虽然不直接导致本次报错，但后续取值逻辑会异常。
4. 提交事件绑定错误：你将onSubmit事件绑定到了Modal组件上，Bootstrap的Modal不会触发该事件，提交逻辑绑定位置错误。
5. 初始状态缺失：state中没有初始化showHide属性，第一次切换Modal时会出现异常。

修复方案 #

1. 修正方法绑定：
   要么将constructor内的绑定代码改为：

this.handleSubmit = this.handleSubmit.bind(this);
this.handleModalShowHide = this.handleModalShowHide.bind(this);

要么直接将两个方法改为箭头函数写法，和handleChange保持一致：

handleSubmit = (event) => {
  // 原有逻辑不变
}
handleModalShowHide = () => {
  this.setState({ showHide: !this.state.showHide });
}

2. 修正state初始值：

this.state = {
  institutionName: '',
  institutionAddress: '',
  institutionPhone: '',
  allData: [],
  showHide: false
};

3. 修正表单提交绑定：
   将onSubmit事件绑定到Form组件上，提交按钮可以保留原有调用，也可以去掉按钮的onClick直接走表单默认提交逻辑：

<Form className="col-lg-6 offset-lg-3" onSubmit={this.handleSubmit}>

4. 优化提交逻辑：提交成功后直接更新allData状态即可，不需要调用window.location.reload刷新整个页面。

内容的提问来源于stack exchange，提问作者Arif Hossain