React类组件无法获取文本框值 运行时报state未定义错误

Cannot read property 'state' of undefined 报错的根源是 onSubmit 方法没有绑定当前组件实例的this指向。

• 你已经在构造函数内为两个输入框的change事件处理函数onChangeCustomerName、onChangeCustomerCountry做了this绑定，所以这两个函数内访问this.state、调用this.setState时不会出现指向丢失的问题。
• 但你直接把未绑定this的this.onSubmit作为form的提交事件回调传入，当表单提交触发事件执行时，这个函数内部的this会脱离组件实例（在React的严格模式环境下this值为undefined），此时函数内读取this.state.customerName的代码就会直接触发报错。

• 提交按钮上错误挂载了onChange = {this.onChangeCustomerName}，提交按钮属于非输入类元素，根本不会触发change事件，这段绑定是无效冗余代码，需要移除。
• 类组件命名不符合React规范：React要求类组件必须采用大驼峰命名，你当前写的小写开头的class products extends Component 会被React识别为原生HTML标签，无法正常渲染组件。
• 展示文本存在拼写错误：<h3>New Cusotmer Details</h3> 中的Cusotmer是Customer的拼写错误，不影响运行但会降低代码可读性。

两种事件this绑定方式任选其一即可：

• 方式1：和你现有代码风格保持一致，在构造函数中补全onSubmit的this绑定，构造函数内的绑定代码修改为：

  this.onChangeCustomerName = this.onChangeCustomerName.bind(this);
  this.onChangeCustomerCountry = this.onChangeCustomerCountry.bind(this);
  this.onSubmit = this.onSubmit.bind(this); // 新增这行绑定代码
  

• 方式2：在JSX传入事件回调时直接用箭头函数包裹，箭头函数会自动捕获定义时的组件this指向，无需在构造函数中写绑定代码，form标签修改为：

  <form onSubmit={(e) => this.onSubmit(e)}>
  

修复完成后，移除提交按钮上的无效onChange绑定，将类名调整为大驼峰的Products，修正文本拼写即可让表单正常运行。

内容的提问来源于stack exchange，提问作者Yasith Samarawickrama