如何访问箭头函数中输入字段的值？

Question

我最近制作了一个 Javascript 颜色转换器（Up for Code Review），其中我有两个函数在输入更改时调用（change 事件）。所以为了实现这个，我有这样的代码：

hexInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

现在跟随 airbnb style guide，我意识到也许我可以使用箭头函数来重新表述这两个绑定，因为它们使用的是匿名函数。所以我将代码更改为：

hexInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

但是，现在当我更改输入的值时，没有任何反应。所以为了找出这个问题的原因，我决定打开 chrome JS 调试器，并在这些调用中添加了几个断点。当我单步执行代码时，我找到了错误的根源：this.value was undefined！所以我决定 google 提出问题并找到，它的答案是“[a]rrow 函数没有 this 或 [sic] 他们自己的”（该问题的链接副本说箭头函数不仅仅是常规函数的较短语法）。所以现在我不知道用什么来代替 this.value。

这引出了我的问题：如何在不使用 this.value 的情况下访问箭头函数内输入字段的值？（请记住，我我是非常 JS 新手)

这是一个代码片段，说明了我上面提到的问题：

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", () => {
            console.log(this.value);
        });
    }
}());

<input id="test" type="text" />

Answer 1

使用可用的事件参数event.target.value:

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", (e) => {
            console.log(e.target.value);
        });
    }
}());

<input id="test" type="text" />

Answer 2

好吧，如果没有上下文，你需要范围：

hexInput.addEventListener("change", function() {
   if (isValidColor(hexInput.value)) {
      rgbInput.value = convertHexToRGB(hexInput.value);
      document.body.style.backgroundColor = rgbInput.value;
   }  
});

但我更喜欢好的代码而不是好看的代码，所以请忽略这里的样式指南:)

现在是代码审查部分：您可以将整个逻辑提取到更通用的函数中，例如：

function fromToConverter(from, to, converter){ 
  from.addEventListener("change", function() {
     if (isValidColor(from.value)) {
        to.value = converter(from.value);
      }  
   });
}

所以你可以这样做：

fromToConverter(hexInput, rgbInput, convertHexToRGB);
fromToConverter(rgbInput, hexInput, convertRGBToHex);

如何访问箭头函数中输入字段的值？

How do I Access the Value of an Input Field inside an Arrow Function?

javascript

anonymous-function

ecmascript-6

arrow-functions