React中函数内调用另一函数？绑定this后仍报undefined问题

嘿，这个问题我太熟悉啦！你遇到的核心问题是**secondaryFun的this也丢失了绑定**，并不是primaryFun的绑定有问题。

让我拆解一下原因：你在构造函数里只绑定了primaryFun，但当mouseOut事件触发调用secondaryFun时，secondaryFun本身的this并没有指向组件实例（在严格模式下会变成undefined）。这时候在secondaryFun里执行this.primaryFun()，this是undefined，自然就会报错说primaryFun是undefined了。

给你几个靠谱的解决方案，任选其一都能解决问题：

方案1：在构造函数中同时绑定两个方法 #

既然你已经习惯用构造函数绑定的方式，那只要把secondaryFun也绑定到组件实例就行：

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.primaryFun = this.primaryFun.bind(this);
    this.secondaryFun = this.secondaryFun.bind(this); // 加上这行！
  }

  primaryFun() { 
    console.log('funn') 
  }

  secondaryFun() { 
    this.primaryFun(); 
  }
}

方案2：用箭头函数定义类方法（推荐） #

箭头函数会自动捕获类上下文的this，不用手动绑定，代码更简洁：

class Navigation extends React.Component {
  primaryFun = () => { 
    console.log('funn') 
  }

  secondaryFun = () => { 
    this.primaryFun(); 
  }
}

方案3：在事件绑定处用箭头函数 #

如果不想修改方法定义，也可以在JSX的事件绑定里直接用箭头函数包裹，确保调用时this指向正确：

// 假设你的组件渲染部分是这样的
render() {
  return (
    <div onMouseOut={() => this.secondaryFun()}>
      {/* 其他内容 */}
    </div>
  );
}

总结一下：React类组件的普通方法默认不会绑定this，任何需要在方法内部使用this（或者作为事件处理函数）的方法，都需要通过上述方式确保this指向组件实例。你之前只绑定了primaryFun，但secondaryFun的this在事件触发时依然是undefined，所以才会出现报错。

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