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未定义！所以我决定谷歌问题并找到this question，其答案表明＆＃34; [a] rrow函数没有这个或[ sic ]他们自己的＆＃34; （该问题的链接副本表示箭头函数不仅仅是常规函数的较短语法）。所以现在我不知道用{。}替换this.value的内容。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: