HTML 图像属性返回未定义答案

【问题标题】：HTML image attribute returns undefinedHTML 图像属性返回未定义
【发布时间】：2019-02-12 05:14:44
【问题描述】：

我有一组 5 个图像，每个图像在过滤器列表中都有一个唯一的过滤器属性，而主图像在一个单独的 div 中。主图像没有应用滤镜。

我想让用户点击侧边栏上的任何图像，然后将选定的过滤器应用于主图像。我尝试为此使用事件侦听器，但我真的不明白发生了什么。

这是我的代码： <img src='http://res.cloudinary.com/demo/image/upload/c_fill,e_art:audrey,h_80,w_120/sample' filter='audrey' className='filter' /> 以及当用户选择图像时调用的事件监听器。

onFilterSelect = event => {
      console.log(evenet.target) // returnsimg element
      console.log(event.target.src) // returns src of img element
      console.log(event.target.filter) // returns undefined
}

我想使用 filter='filter' 属性来调度一个将状态设置为新选择的过滤器的操作，但结果我一直未定义。

【问题讨论】：

不要认为它与反应有任何关系，过滤器不是img 的有效属性，不是吗？你试过data-attribute 吗？ <img src='http://res.cloudinary.com/demo/image/upload/c_fill,e_art:audrey,h_80,w_120/sample' data-filter='audrey' className='filter' /> 然后 console.log(event.target.attributes['filter'].value) 在你的处理程序中
如果使用自定义属性，@Olivier，则：event.target.dataset.filter 将返回属性字符串。
谢谢，是的，我忘记了 dataset 属性

标签： javascript html reactjs cloudinary

【解决方案1】：

HTMLImageElement.prototype 没有filter 属性（您正在尝试访问）。

您的图像具有filter-属性（这会使您的 HTML 无效，因为它不是 img 元素上的有效属性）。

如果您需要坚持使用该无效属性名称，您可以使用

console.log(event.target.getAttribute('filter'))

更好的解决方案是将该属性更改为 data-filter 属性，您可以像这样访问它：

console.log(event.target.dataset.filter)

请注意.dataset 对象中有一个特殊的命名约定：

data-filter="Audrey"

可以使用

访问

img.dataset.filter

但是

data-image-filter="Audrey"

将使用

访问

img.dataset.imageFilter

注意 kebab-case 到 camel-case 的自动转换！

【讨论】：

我没有意识到我使用了无效的属性名称。谢谢，成功了！
您可以在任何 HTML 元素上创建新属性，只要 a) 属性名称以 data- 开头，b) 只包含小写字母和破折号，c) 没有破折号最后，d) 连续的破折号不超过一个。
请不要忘记将答案标记为解决您问题的正确答案。
我不敢相信我忘记了，谢谢你的提醒。你的回答对我很有帮助。
那么，您为什么选择不那么详尽的答案。您确定这是解释问题所在以及如何解决问题的最佳答案吗？

【解决方案2】：

console.log(event.target.getAttribute('filter'))

并非所有 HTML 属性都在元素的属性中。正如其他人所建议的那样，对于自定义属性，也使用 data 更好。

【讨论】：