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