HTML-атрибут изображения возвращает неопределенный

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

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 лучше для пользовательских атрибутов, как это предлагают другие.