Ant Design组件函数内this未定义问题求助

我之前开发时也碰到过一模一样的问题！这本质是JavaScript函数上下文的绑定问题——Ant Design的confirm组件里，onOk默认采用普通函数声明时，它的this并不会指向你的React组件实例，所以自然访问不到this.state。你用临时变量存this的方式虽然能临时解决，但确实不是最符合最佳实践的方案，下面给你几个更优雅的解决办法：

方法1：使用箭头函数定义onOk #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件实例），直接就能访问state：

confirm({
  title: "Some thing i wanna do which i need to confirm",
  onOk: () => {
    alert(this.state.RegisterDetail.FirstName);
  },
  onCancel() {}
});

这种方式最简洁，适合逻辑简单的场景。

方法2：用bind手动绑定this #

如果习惯用普通函数，你可以通过bind(this)把组件实例的this绑定到onOk函数上，确保函数执行时上下文正确：

confirm({
  title: "Some thing i wanna do which i need to confirm",
  onOk: function() {
    alert(this.state.RegisterDetail.FirstName);
  }.bind(this),
  onCancel() {}
});

方法3：提前在constructor中绑定方法（适合复杂逻辑） #

如果onOk里的逻辑比较多，建议把它抽成组件的类方法，然后在constructor里提前绑定this，这样代码更清晰易维护：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      RegisterDetail: { FirstName: '' }
    };
    // 提前绑定this
    this.handleConfirmOk = this.handleConfirmOk.bind(this);
  }

  handleConfirmOk() {
    alert(this.state.RegisterDetail.FirstName);
  }

  showConfirm() {
    confirm({
      title: "Some thing i wanna do which i need to confirm",
      onOk: this.handleConfirmOk,
      onCancel() {}
    });
  }

  // ...其他组件代码
}

这几种方法都能彻底解决this未定义的问题，比临时存变量的方式更符合React和JavaScript的编码规范。

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