ElemeFE / ElemeFE/element-react
Checkbox 外套一层div, div绑定click事件会触发两次
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 435
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
由于在`Table`中循环渲染`Checkbox`, 因此不能用`Group`。
在实际项目中发现`checkbox`多次触发无用的`re-render`, 因为传入的`onChange`事件是带参数的, 只能通过**箭头函数**或者`bind`来传参。
然而`bind`或者箭头函数每次都会生成新的`function`会导致`shouldComponentUpdate`返回时`true`,这不是预期的, 所幸看了文档, [文档建议](https://reactjs.org/docs/faq-functions.html#example-passing-params-using-data-attributes)
所以想到了在`checkbox`外层套一个`div`,来满足文档建议的方式. 但是问题也随之而来, 想象中`div`的`click`事件应该只触发一次, 但是现在确触发两次, 一次是`span.el-checkbox__inner` 一次是`input`
因此如何避免此问题呢?
### 复现步骤
编辑官网示例
```
constructor(props) {
super(props);
this.state = {
checkList: ['复选框 A', '选中且禁用']
}
}
render() {
return (
)
}
```
最根本的原因是`Checkbox`的`re-reder`, 通过`why-did-you-update`可以看到, 很多组件都是没必要的更新, 因此是不是需要考虑下如何避免这种`re-reder`? 现在用户体验真的很差
可以通过动图看下更新

Contributor guide
Assessment
This issue has not been assessed yet.