检查无线电输入未触发：检查伪选择器

Question

主要问题：

当根据标记清楚地检查元素时，选中的样式如何不处于活动状态？

语境：

我昨天遇到了这个问题，并用一个丑陋的 hack 解决了它，但宁愿更好地理解它。

首先，这是呈现的标记：

<fieldset id="Påbyggnad/Omskolning *" class="RadioButton-module_RadioButtons__3slSm">
  <div class="RadioButton-module_RadioButton__1Ftxu">
    <label for="Påbyggnad i tidigare yrkesinriktning">Påbyggnad i tidigare yrkesinriktning</label>
    <input id="Påbyggnad i tidigare yrkesinriktning" name="Omskolning" type="radio" value="false" disabled="" checked="">
  </div>
  <div class="RadioButton-module_RadioButton__1Ftxu">
    <label for="Omskolning i ny yrkesinriktning">Omskolning i ny yrkesinriktning</label>
    <input id="Omskolning i ny yrkesinriktning" name="Omskolning" type="radio" value="true" disabled=""> 
 </div>
</fieldset>

如我们所见，第一个输入被选中，两个输入都被禁用。

尽管如此，只有与禁用的伪选择器关联的 CSS 处于活动状态：

.RadioButton-module_RadioButtonGroup__ZHytl .RadioButton-module_RadioButtons__3slSm :disabled {
    background-color: #dde0e7;
    border: 1px solid #a2a4aa;
    cursor: unset;
}

(SCSS) 样式表的相关片段：

:disabled {
  background-color: $disabled-color;
  border: 1px solid $gray-2;
  cursor: unset;
}
:disabled:checked {
  background-color: $gray-1;
  border: 1px solid $gray-2;
}

进一步的背景：

我们正在使用React和defaultChecked 。 请参阅下面的部分实现：

export const RadioButton = ({
  label,
  id = label,
  defaultChecked,
  onClick,
  onChange,
  testSelector,
  name,
  value,
  onBlur,
  disabled,
}) => {
  return (
    <div className={s.RadioButton}>
      <label htmlFor={id} className={s.RadioButtonLabel}>
        {label}
      </label>
      <input
        className={s.RadioInput}
        disabled={disabled}
        defaultChecked={defaultChecked}
        id={id}
        onClick={onClick}
        onChange={onChange}
        onBlur={onBlur}
        name={name}
        value={value}
        data-testid={testSelector}
        type="radio"
      />
    </div>
  )
}

由于组件的渲染方式，它在很短的时间跨度内重新渲染了 6 次（可能本身并不理想，但让我们专注于主要问题！）。 当defaultChecked在前 5 次渲染中的一个中评估为true或false时，该值似乎在其他渲染中持续存在，而 null/undefined 评估被第一个true / false评估取代，这通常出现在第三次渲染中。

defaultChecked由其第一个非空值定义似乎很合理，但随后存在冲突状态：

• 标记说已checked
• 样式表说未检查
• defaultChecked 似乎说未选中，但是作为函数的标记没有反映这一点？

如果确实没有检查输入，如何checked标记显示？

PS 用来解决这个问题的“丑陋的黑客”是为了确保在早期渲染期间，defaultChecked 永远不会被评估为非空值。