ReactJS中change事件内this上下文变更，如何调用组件方法？

这问题我太熟了！你遇到的核心问题是jQuery事件回调里的this指向不对——默认情况下，jQuery会把事件回调里的this绑定到触发事件的DOM元素（也就是你的#post_list下拉框），而不是React组件的实例，所以你调用this.getReviewVacancyUpdate时自然会报“undefined”。

下面给你几个实用的解决办法，按推荐度排序：

1. 用箭头函数绑定回调（最简洁） #

箭头函数不会创建自己的this，它会继承外层上下文的this（也就是你的React组件实例），直接用它就能解决问题：

componentDidMount() {
  $('#post_list').on('change', (e) => {
    // 这里的this就是React组件实例了
    this.getReviewVacancyUpdate(e.target.value);
  });
}

2. 提前缓存组件实例的this #

如果你习惯用普通函数作为回调，可以先把组件的this存到一个变量里（比如that或者self），然后在回调里用这个变量调用方法：

componentDidMount() {
  const that = this; // 缓存组件实例的this
  $('#post_list').on('change', function(e) {
    // 这里的this是DOM元素，that是组件实例
    that.getReviewVacancyUpdate(this.value);
  });
}

3. 更“React化”的方案：用Ref代替直接jQuery选择器 #

在React里尽量少直接用$('#xxx')这种全局选择器，推荐用React的ref来获取DOM元素，同时记得在组件卸载时清理事件和Select2实例，避免内存泄漏：

class YourComponent extends React.Component {
  // 创建ref
  postListRef = React.createRef();

  componentDidMount() {
    const $postList = $(this.postListRef.current);
    // 初始化Select2
    $postList.select2();
    // 绑定change事件，用箭头函数保留组件this
    $postList.on('change', (e) => {
      this.getReviewVacancyUpdate(e.target.value);
    });
  }

  componentWillUnmount() {
    // 清理事件并销毁Select2实例
    const $postList = $(this.postListRef.current);
    $postList.off('change').select2('destroy');
  }

  // 组件方法（这里用箭头函数也能避免this绑定问题）
  getReviewVacancyUpdate = (value) => {
    // 你的业务逻辑
    console.log('选中的值：', value);
  }

  render() {
    return (
      <select id="post_list" ref={this.postListRef}>
        {/* 下拉选项 */}
        <option value="1">选项1</option>
        <option value="2">选项2</option>
      </select>
    );
  }
}

另外提一句：你之前尝试的静态方法确实不太合适，因为静态方法属于类本身，无法访问组件实例的状态和其他实例方法，所以不推荐用这种方式。

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