HTML 图片属性 returns 未定义

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' 道具来分派一个将状态设置为新选择的过滤器的动作，但结果我一直未定义。

Answer 1

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

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

Answer 2

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 图片属性 returns 未定义

HTML image attribute returns undefined

html

javascript

cloudinary

reactjs