Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2ue opened this issue Nov 15, 2024 · 1 comment
Open

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

2ue opened this issue Nov 15, 2024 · 1 comment
Labels
enhancement New feature or request

Comments

@2ue
Copy link
Contributor

2ue commented Nov 15, 2024

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

Copy link
Contributor

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

@HaixingOoO HaixingOoO added the enhancement New feature or request label Nov 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants