如何在箭头函数中获取输入字段的值？解决绑定后无响应问题

根本原因：箭头函数的词法this绑定 #

我之前也踩过这个坑！核心问题出在箭头函数和普通匿名函数的this绑定规则差异上：

• 用普通匿名函数做事件处理器时，函数内部的this会自动指向触发事件的DOM元素（也就是你的输入框），所以之前能通过this.value轻松拿到输入值。
• 但箭头函数的this是词法作用域绑定的——它会直接继承外层作用域的this，而不是指向当前触发事件的输入框。这就导致你在箭头函数里访问this.value时，拿到的根本不是输入框的值，自然触发不了后续逻辑。

解决方案：两种可靠的获取输入值方式 #

1. 通过事件对象的target属性获取

事件处理函数会自动接收一个事件对象（通常命名为e或event），这个对象的target属性就是触发事件的DOM元素。直接用它拿值就行：

// 先缓存你的输入框元素
const colorInput = document.getElementById('color-convert-input');

colorInput.addEventListener('change', (e) => {
  const inputValue = e.target.value;
  // 这里执行你的颜色转换逻辑，比如调用对应转换函数
  handleColorConvert(inputValue);
});

2. 直接引用已缓存的DOM元素变量

如果你已经提前获取并保存了输入框的DOM元素（比如上面的colorInput），可以直接在箭头函数里引用这个变量来取值，完全不用依赖this：

colorInput.addEventListener('change', () => {
  const inputValue = colorInput.value;
  handleColorConvert(inputValue);
});

快速排查步骤（帮你确认问题） #

1. 在箭头函数里加一行console.log(this)，打开浏览器控制台看看输出——大概率是window对象（全局作用域下）或者外层函数的this，绝对不是你的输入框。
2. 再打印e.target，确认它指向的是不是你绑定事件的输入框，排除事件绑错元素的可能。
3. 检查控制台有没有报错，比如是否存在未定义的变量，或者转换函数本身的逻辑问题（不过根据你的描述，问题基本出在获取值这一步）。

顺便提一句：Airbnb风格指南推荐箭头函数，主要是用于需要保留外层this的场景（比如类的方法回调），但在事件处理器这种需要指向当前DOM元素的场景下，用上面两种方法反而更贴合需求哦。

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