ElemeFE / ElemeFE/element-react

Checkbox 外套一层div, div绑定click事件会触发两次

Open
#958 0 comments 0 reactions 0 assignees View on GitHub
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 (

console.log(e.target)}>

)
}
```

最根本的原因是`Checkbox`的`re-reder`, 通过`why-did-you-update`可以看到, 很多组件都是没必要的更新, 因此是不是需要考虑下如何避免这种`re-reder`? 现在用户体验真的很差

可以通过动图看下更新

![image](http://sowcar.com/t6/680/1552363718x2059272752.gif)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.