[Checkbox]Checkbox的Group组件事件绑定设计不合理

[2ue]

tdesign-react 版本

1.9.3

重现链接

https://stackblitz.com/edit/react-kgezs2?file=src%2Findex.js

重现步骤

Checkbox.Group组件想要实现每一行只展示固定个数（demo里面固定4个），由于Group组件没有提供更精细化的定制能力，只能通过覆盖组件内部样式达到目的。 比如：

.t-checkbox-group {
  display: flex;
  gap: 0;
}
.t-checkbox {
  width: 25%;
  padding-right: 16px;
  padding-bottom: 16px;
}

这样效果是实现了，但是由于每一个option的label字数可能不一致，导致有些地方会有空白（如下图），会出现点击空白区域也有选中和取消选择的效果。

现在希望点击空白区域不要有选中/取消选中效果，只能不使用checkbox.Group组件,使用Checkbox组件来实现，有点曲折，所以希望Checkbox.Group组件更加灵活强大

能否不把点击选中的事件放到外层？ 或者提供一个完全自定义的renderOptions({ option, checkbox, label, onClick})？ 类似这种? renderOptions={({ option, checkboxNode, labelNode, onClick}) => <div onClick={onClick}>{checkboxNode}{labelNode}}

期望结果

点击空白区域不要有选中或者取消选中效果

实际结果

点击空白区域有选中或者取消选中效果

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

👋 @2ue，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[RylanBot]

可以利用「插槽」渲染自定义布局，而不是直接使用 option 实现

<Checkbox.Group
  value={city}
  onChange={(value) => {
    setCity(value);
  }}
>
  <div
    style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: '16px',
    }}
  >
    {options.map((item, index) => (
      <div key={index}>
        <Checkbox value={item.value}>{item.label}</Checkbox>
      </div>
    ))}
  </div>
</Checkbox.Group>