React组件方法中如何正确访问this对象？

这个问题在React类组件里太常见了——当类方法没有正确绑定上下文时，this就会默认指向window（非严格模式下），导致你拿不到组件的props和state，代码自然就报错了。下面给你几个实用的解决办法：

方法1：在构造函数中手动绑定this #

这是React类组件里最经典的绑定方式，在constructor里把finalize方法的this强制绑定到组件实例上：

class SelectElement extends React.PureComponent { 
  constructor(props) { 
    super(props); 
    this.state = { optionList: [] }; 
    // 关键步骤：把this绑定到组件实例
    this.finalize = this.finalize.bind(this);
  } 
  finalize() { 
    let key = this.props.inputName; 
    let val = this.state.text; 
    let postObj = {}; 
    postObj[key] = val; 
    console.dir(postObj); 
    $.post($.endPoints.saveCallField, postObj).done(function (response) { 
      console.dir(response);
    });
  }
}

方法2：用箭头函数定义类方法 #

ES6的箭头函数会自动捕获当前上下文的this，直接把finalize定义成箭头函数，就不用手动绑定了：

class SelectElement extends React.PureComponent { 
  constructor(props) { 
    super(props); 
    this.state = { optionList: [] }; 
  } 
  // 箭头函数自动绑定组件实例的this
  finalize = () => { 
    let key = this.props.inputName; 
    let val = this.state.text; 
    let postObj = {}; 
    postObj[key] = val; 
    console.dir(postObj); 
    $.post($.endPoints.saveCallField, postObj).done(function (response) { 
      console.dir(response);
    });
  }
}

方法3：调用方法时用箭头函数包裹 #

如果是在事件触发时调用finalize（比如按钮点击），也可以在调用的地方用箭头函数来保留上下文：

// 举个例子，在render里的按钮点击事件中使用
render() {
  return <button onClick={() => this.finalize()}>保存数据</button>;
}

不过要注意，这种方式每次组件render都会创建一个新的箭头函数，在性能敏感的场景下，更推荐前两种方法。

另外补充一点：如果你的done回调里之后也要用到组件的this，同样可以把这个回调改成箭头函数，避免再次出现指向问题：

$.post($.endPoints.saveCallField, postObj).done((response) => { 
  console.dir(response);
  // 这里的this也会指向组件实例，方便后续操作
});

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