自定义Checkbox：禁止点击Label选中复选框的需求

首先咱们来拆解下你遇到的两个问题的根源：

• 问题1：点击Label任意区域都选中复选框：这是因为<label>元素的默认行为——它会和内部关联的<input>绑定，点击label范围内的任何内容都会触发复选框的状态切换。
• 问题2：Label内的链接无法正常点击：点击链接时，事件会先触发链接的点击逻辑，然后向上冒泡到<label>，触发label的默认复选框切换行为，导致链接的跳转被“拦截”了。

下面给你两种可行的解决思路，推荐第一种，结构更清晰易维护：

方案一：调整DOM结构，分离Label与文本内容 #

把原来包裹所有内容的<label>改成只包裹复选框和自定义的checkmark，文本和链接单独放在外面，再用一个容器把它们组合起来保证布局对齐。

修改后的HTML代码 #

<div className="checkbox-wrapper">
  <!-- Label只负责复选框的点击触发 -->
  <label className="container">
    <input type="checkbox" onChange={event => props.onChange(event)}/>
    <span className="checkmark"></span>
  </label>
  <!-- 文本和链接单独放置，脱离Label的触发范围 -->
  <span className="checkbox-text">
    I have read and do accept <a href={props.link}>{props.topic}</a>
  </span>
</div>

补充CSS样式（保证布局对齐） #

/* 新增容器样式，让复选框和文本横向对齐 */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* 可根据需求调整复选框和文本的间距 */
}

/* 给Label设置相对定位，保证自定义checkmark的定位正确 */
.container {
  position: relative;
  cursor: pointer;
}

/* 保留你原来的自定义Checkbox CSS样式 */
/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 21px;
  width: 21px;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(29, 29, 29);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

这种方式从根源上解决了两个问题：

• 只有点击复选框区域（label内的部分）才会触发选中，文本区域点击无反应
• 链接不在label范围内，点击时不会触发复选框切换，能正常跳转

方案二：不修改结构，通过事件处理修复（适合无法调整DOM的场景） #

如果因为某些原因不能调整DOM结构，可以通过阻止事件冒泡和默认行为来修复：

修改后的HTML代码 #

<label 
  className="container"
  onClick={(e) => {
    // 只有点击复选框或自定义checkmark时，才允许触发默认选中行为
    const isCheckboxTarget = e.target.closest('.checkmark') || e.target.type === 'checkbox';
    if (!isCheckboxTarget) {
      e.preventDefault();
    }
  }}
>
  I have read and do accept 
  <a 
    href={props.link}
    onClick={(e) => {
      // 阻止链接的点击事件冒泡到label，避免触发复选框选中
      e.stopPropagation();
    }}
  >
    {props.topic}
  </a>
  <input type="checkbox" onChange={event => props.onChange(event)}/>
  <span className="checkmark"></span>
</label>

这种方式通过事件处理拦截了非复选框区域的label点击，同时让链接的点击事件不冒泡到label，不过相比方案一，事件逻辑会复杂一些，后期维护成本稍高。

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