HTML图片属性返回未定义

时间:2018-09-06 21:48:48

标签: javascript html reactjs cloudinary

我有一组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'道具来调度一个将状态设置为新选择的过滤器的动作,但结果一直是不确定的。

2 个答案:

答案 0 :(得分:4)

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

请注意将烤肉串箱自动转换为骆驼箱!

答案 1 :(得分:1)

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

并非所有HTML属性都在元素的属性中。正如其他人所建议的那样,也可以使用data更好地定制属性。