HTML5 type="range"输入框this.value返回undefined的技术咨询

嘿，我之前也碰到过一模一样的问题！当把Range输入组件的方法传入其他函数时，this.value返回undefined，大概率是this的指向出了问题，或者属性绑定环节没做好。我给你梳理几种最常见的场景和对应的解决办法：

情况1：函数传递时丢失了this绑定 #

当你把组件的方法作为参数传给外部函数时，this的指向会默认指向全局对象（非严格模式）或者undefined（严格模式），而不是你的组件实例，这时候访问this.value自然就拿不到值了。

举个典型的错误示例：

// 组件中的方法
handleRangeUpdate() {
  console.log(this.value); // 这里的this不是组件实例，返回undefined
}

// 传递方法给外部函数
this.someUtilityFunction(this.handleRangeUpdate);

解决办法： #

• 用箭头函数定义方法：箭头函数会自动捕获当前组件的this上下文，永远指向组件实例：

  handleRangeUpdate = () => {
    console.log(this.value); // 现在能正常拿到组件的value属性了
  }
  

• 手动绑定this：如果不想用箭头函数，传递方法时用bind把this绑定到组件实例：

  this.someUtilityFunction(this.handleRangeUpdate.bind(this));
  

情况2：模板中属性绑定不完整 #

如果你的Range输入在HTML模板里没有正确和组件的value属性做双向绑定，或者组件里根本没声明value属性，那this.value肯定是undefined。

比如错误的模板写法：

<input type="range" (input)="handleRangeUpdate()">

解决办法： #

• 先在组件TS里声明并初始化value属性：

  value: number = 50; // 给个默认值，比如中间值
  

• 然后在模板里用双向绑定关联输入框：

  <input type="range" [(ngModel)]="value" (input)="handleRangeUpdate()">
  

  这样输入框的数值变化会同步到组件的value属性，调用方法时this.value就能拿到正确的值了。

情况3：外部函数修改了回调的上下文 #

如果调用你传入方法的外部函数，用call或者apply修改了this的指向，也会导致this.value失效。

解决办法： #

• 在组件内部提前保存组件实例的引用，比如在构造函数里：

  constructor() {
    const componentInstance = this;
    this.handleRangeUpdate = function() {
      console.log(componentInstance.value); // 用提前保存的引用访问属性
    }
  }
  

• 还是推荐用箭头函数，它的this不会被外部的call/apply修改，更省心。

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