React自定义CSS样式复选框点击后勾选状态不保留问题

你遇到的问题确实出在CSS选择器和DOM结构的匹配上，我来帮你拆解并解决：

核心问题：选择器逻辑与DOM结构不匹配 #

你的DOM结构是复选框input嵌套在label内部：

<label className="item-list" key={opt}>
  {opt}
  <input type="checkbox" name="opts" value={opt} onChange={handleChange} className="my-checkbox" />
</label>

但你写的CSS选中状态选择器用了相邻兄弟选择器+：

input[type=checkbox]:checked + label:before

这个选择器的逻辑是「找到被选中的input，然后选中它紧挨着的下一个label元素的:before伪元素」，可实际input是label的子元素，根本不存在这样的结构，所以选中状态的样式完全不会生效。而hover样式label:hover:before是直接作用在label上的，所以悬停时能正常显示勾选标记。

修复方案 #

我们可以通过两种方式解决这个问题，适配你的DOM结构：

方式1：使用:has()伪类（推荐，现代浏览器支持）

:has()伪类可以判断label内部是否包含被选中的复选框，直接修改label的:before伪元素，完美适配你当前的DOM结构：

/* 替换原来的input[type=checkbox]:checked + label:before */
label:has(.my-checkbox:checked):before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

方式2：调整DOM结构（兼容旧浏览器）

如果需要兼容不支持:has()的旧浏览器，可以把input放到label前面，配合相邻兄弟选择器使用，同时通过id和htmlFor关联复选框与标签：

// 修改组件中的列表项结构
<div className="dropdown-jurisdictions">
  {props.options.map((opt) => (
    <div className="item-row" key={opt}>
      <input 
        type="checkbox" 
        name="opts" 
        value={opt} 
        onChange={handleChange} 
        className="my-checkbox" 
        id={`juris-checkbox-${opt}`}
      />
      <label className="item-list" htmlFor={`juris-checkbox-${opt}`}>
        {opt}
      </label>
    </div>
  ))}
</div>

对应的CSS保持你原来的选中样式即可：

input[type=checkbox]:checked + label:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

额外的React状态优化小提示 #

虽然你的功能正常，但直接修改原Set的写法可以优化一下，避免潜在的状态更新问题：

function handleChange(event) {
  const value = event.target.value;
  const checked = event.target.checked;
  // 使用函数式更新，基于前一次状态创建新Set，避免直接修改原状态
  setSelectedOpts(prev => {
    const newSet = new Set(prev);
    checked ? newSet.add(value) : newSet.delete(value);
    return newSet;
  });
}

// 用useEffect监听状态变化，自动触发父组件回调
React.useEffect(() => {
  props.onChange && props.onChange(Array.from(selectedOpts.values()));
}, [selectedOpts, props.onChange]);

这样逻辑更清晰，也符合React状态更新的最佳实践。

内容的提问来源于stack exchange，提问作者Prova12