Tencent / tdesign-react

A React UI components lib for TDesign.
https://tdesign.tencent.com/react
MIT License
835 stars 326 forks source link

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

Open 2ue opened 1 week ago

2ue commented 1 week ago

tdesign-react 版本

1.9.3

重现链接

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

重现步骤

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

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

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

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

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

{checkboxNode}{labelNode}
}

期望结果

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

实际结果

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

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

github-actions[bot] commented 1 week ago

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