イベントの伝播は標準のhtmlのようには起こりません

Question

私はreactがイベントの独自の合成実装を使用していることを知っています。しかし、彼らは標準的なHTMLと全く同じではないと私には思われますが、これは問題です。私の場合は、いくつかのimgタグの兄弟であるチェックボックスがあります。 2つのimgタグがあります.1つはチェックマークを表し、もう1つは未チェックです。私は、チェックボックスがチェックされていない状態になっているときに、ディスプレイを表示しないCSSスタイルをいくつか持っています。このhtml/cssを反応させようとするのは難しいです。 Clickイベントは、標準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; 
} 

を