React类组件中this指向异常求助：调用方法提示未定义

嘿，刚学React的时候我也踩过一模一样的坑！你碰到的Cannot read property 'openm2' of undefined错误，核心原因是类组件里的事件处理函数默认没有绑定组件实例的this。当表单的onSubmit触发openm方法时，this的上下文已经不是你的Car组件实例了，自然找不到openm2方法。

下面给你三种靠谱的解决方案，按推荐程度排序：

1. 使用类字段箭头函数（最简洁推荐） #

直接把openm定义成箭头函数，箭头函数会自动继承外层作用域的this（也就是你的组件实例）：

class Car extends React.Component {
  openm2() {
    return "Hello from openm2";
  }
  // 改成箭头函数
  openm = (e) => {
    e.preventDefault();
    this.openm2(); // 现在this指向组件实例，不会报错了
  }
  render() {
    // ... 其他代码不变
  }
}

这种写法不用额外处理绑定，代码干净利落，是现在React社区最常用的方式。

2. 在构造函数中手动绑定this #

这是React早期的标准写法，通过bind把this绑定到组件实例：

class Car extends React.Component {
  constructor(props) {
    super(props);
    // 手动绑定openm的this到组件实例
    this.openm = this.openm.bind(this);
  }

  openm2() {
    return "Hello from openm2";
  }

  openm(e) {
    e.preventDefault();
    this.openm2();
  }

  render() {
    // ... 其他代码不变
  }
}

这种写法需要在构造函数里加绑定代码，虽然麻烦一点，但逻辑清晰，适合理解this绑定的原理。

3. 在事件绑定处使用箭头函数 #

直接在onSubmit里用箭头函数包裹openm，这样调用时this会指向组件实例：

render() {
  return (
    <div>
      {/* ... 其他代码 */}
      <form onSubmit={(e) => this.openm(e)}>
        <input type="text" name="type" />
        <button>Remo all</button>
      </form>
    </div>
  );
}

不过要注意，这种方式每次组件渲染时都会创建一个新的箭头函数，如果你的组件需要频繁渲染（比如列表项），可能会有轻微的性能损耗，小组件或者渲染不频繁的场景用没问题。

选一种你觉得顺手的写法改就行，推荐第一种，省事又优雅～

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