Распространение событий не происходит, как стандартный html

Question

Я знаю, что реакция использует собственную синтетическую реализацию событий. Однако мне кажется, что они не совсем похожи на стандартный html, и это проблема. В моем случае у меня есть флажок, который является родным для некоторых тегов img. Есть два тега img, один для представления отмеченных и другой непроверенный. У меня есть некоторый стиль css, который не отображает никого, когда флажок находится в состоянии unchecked. Попытка заставить этот html/css работать с реакцией сложно. Похоже, что событие click не распространяется на флажок sibling с реагирующим компонентом, хотя он работает со стандартным html. Заметьте, что есть некоторая путаница, я знаю, что нереактивная версия этого использует css, а не события. Но я пытаюсь реализовать реактивную версию той же самой вещи и ожидал нормального поведения распространения событий html, чего я не вижу. Также обратите внимание, что флажок - это родной брат. Он также прозрачен, поэтому пользователь никогда не нажимает на флажок, который они нажимают на теги img.

.checkbox-image input[type="checkbox"] + label img.selected { 
    display: none; 
} 

.checkbox-image input[type="checkbox"] + label img.unselected { 
    display: block; 
} 

<div class="checkbox-image"><input id="portfolio-standard-dev" type="checkbox" data-name="PortfolioStandardDeviation"><label for="mp-chart3"><img class="unselected" src="/images/img-843599.png"><img class="selected" src="/images/img-1b9f30.png"><span>Portfolio Standard Deviation</span></label></div> 

Answer 1

CSS не имеет ничего общего с событиями. Распространение событий не может повлиять на ваши стили. Вы должны обработать, когда пользователь установил/снял флажок и вручную обновил класс изображения.

Или вы можете попробовать следующий чистый CSS:

.checkbox-image input[type="checkbox"]:checked + label img { 
    display: none; 
} 

.checkbox-image input[type="checkbox"] + label { 
    display: block; 
}