React类组件将方法抽离到外部文件后this上下文丢失如何修复？

你抽离到独立文件的handleChange函数没有绑定React组件实例的上下文：箭头函数本身不会创建自身的this，调用时也没有传入类组件的实例指向，所以内部访问this时得到undefined。

因为要求方法必须放在类外部，推荐以下两种可行方案：

方案1：显式传入组件实例（推荐，逻辑最清晰） #

调用抽离方法时主动将组件实例作为参数传入，不需要做任何上下文绑定操作。

修改组件调用代码 #

import { handleChange } from './methods';    

class Test extends Component {
  state = {
    number: 42,
    // 注意：你原有代码逻辑里用到了state.data，需要确保该字段存在，否则会报错
    data: {}
  }

  render() {
    const { number } = this.state;
    return(
      <MyComponent number={number} onChange={e => handleChange(e, this)} />
    );
  }
}

export default Test;

修改method.js代码 #

// method.js
// 第二个参数ctx接收传入的组件实例，替换原函数内的this指向
export const handleChange = (e, ctx) => {
    console.log("this is:", ctx)
    const { data } = ctx.state;
    const { name, value, key} = e.target;

    ctx.setState({
        data: {
            ...data,
            [key]: data[key].set(name, value)
        }
    });
}

方案2：调用时绑定上下文 #

无需修改method.js的原有代码，在组件内调用时通过call/bind绑定组件实例的this指向：

// 写法1：用call主动传入this
render() {
  const { number } = this.state;
  return(
    <MyComponent number={number} onChange={e => handleChange.call(this, e)} />
  );
}

// 写法2：用bind预绑定this，无需额外包裹箭头函数
render() {
  const { number } = this.state;
  return(
    <MyComponent number={number} onChange={handleChange.bind(this)} />
  );
}

注意：该方案中bind每次渲染都会生成新的函数实例，若组件渲染频率极高可能产生微小性能开销，大部分业务场景可忽略。

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