HTML图像属性返回undefined

Question

我有一组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' prop来调度一个动作，将状态设置为新选择的过滤器但是我继续得到未定义的结果。

Answer 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

请注意烤肉串自动转换为驼背盒！

Answer 2

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

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