Skip to content

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

@2ue

Description

@2ue

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions