Question

我知道react使用自己的事件综合实现。然而，在我看来，它们并不完全像标准的HTML，这是一个问题。在我的情况下，我有一个复选框，是一些img标签的兄弟。有两个img标签，一个用于表示已检查，另一个未经检查。我有一些css样式，当复选框处于未选中状态时，它会显示无。试图让这个html / css使用反应很难。似乎click事件没有传播到带有react组件的复选框兄弟，虽然它可以使用标准的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;
}

事件传播不会像标准html那样发生

1 个答案: