Javascript 如何访问Arrow函数中输入字段的值？

我最近制作了一个Javascript颜色转换器（Up for），其中我有两个函数，当输入被更改时调用（

change

事件）。所以为了实现这一点，我有这样的代码：

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

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

接下来，我意识到也许我可以使用箭头函数来重新表述这两个绑定，因为它们使用的是匿名函数。因此，我将代码更改为：

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

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

但是，现在当我更改输入的值时，什么也没有发生。因此，为了尝试找出这个问题的原因，我决定打开ChromeJS调试器，并在这些调用中添加一些断点。当我遍历代码时，我找到了错误的根源：

this.value

未定义！所以我决定用谷歌搜索这个问题并找到了答案，答案是“[a]rrow函数没有自己的this或[sic]（这个问题的链接副本说箭头函数不仅仅是常规函数的较短语法）。所以现在我不知道用什么来替换

这个.value

这引出了我的问题：如何在不使用

This.value

的情况下访问箭头函数中输入字段的值？（请记住，我对JS很陌生）

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

（函数（）{
window.onload=函数（）{
document.getElementById（“测试”）.addEventListener（“更改”），（）=>{
console.log（this.value）；
});
}
}());
使用可用的事件参数
event.target.value
：


（函数（）{
window.onload=函数（）{
document.getElementById（“test”）.addEventListener（“更改”，（e）=>{
console.log（如target.value）；
});
}
}());
没有上下文，您需要范围：

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

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


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

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);

在这种情况下，没有理由使用箭头函数。我知道我想用最新的东西，但当它实际造成的问题多于它解决的问题时。。。don't.Arrow函数不是新函数。我建议你花时间学习为什么每个函数都有用，而不是盲目地重写所有函数。我不明白为什么这个问题被否决了。即使我不知道答案在说什么，我也尽了最大的努力来找到我的答案。1.研究，2。我试图通过调试来解决这个问题。作为一个语言新手，我真的不知道到底要搜索什么。@kevin B这对OP有用吗？很明显，AirBnB风格的指南（再一次）毫无头绪。下一个投票人，想用这个答案来评论一下有什么问题吗：-）刚刚上一次投票撤销了下一次投票…好吧，这看起来确实有效！谢谢（对于那些好奇的人来说，）我不明白为什么这次投票被否决了。感谢代码审查部分！