目录
- 引言
- 第一步、选择要修复的Bug
- 第二步、准备工作
- 第三步、问题排查
- 第四步、问题修复
- 第五步、单元测试
- 第六步、提交Pull Request
- 总结
引言
我在工作中大量使用Ant Design,它为我省去了很多重复劳动,所以有空的时候,我也会为Ant Design做一些微小的贡献。
本文详细描述了我处理一个Ant Design的Bug全过程,文章内容较多但难度并不高,新手同学看完也可以尝试为Ant Design添砖加瓦!
第一步、选择要修复的Bug
Ant Design有不少Bug,你可以直接访问它的Issues,挑一个简单的问题尝试解决,需要注意的是,并不是所以Issue都是Bug,经过管理员确认过的Bug一般会打上Bug的标记。
这次我处理的问题是#37165。
第二步、准备工作
Fork ant-design仓库到自己的Github,回到自己的Github,将刚刚Fork的仓库克隆到本地,然后基于master分支新建一个bugfix分支,接着安装依赖,启动项目,然后就可以在开发环境访问Ant Design官网上所有的Demo,方便调试。
npm install && npm run start
第三步、问题排查
回到问题#37165,它的表现是:一个DatePicker,一个Input, 用户用鼠标选中Input的内容进行复制时经常会滑到DatePicker,会触发日历控件输入框的focus事件。
这种操作是比较常见的,问题简化完了就是:只要在日历控件上触发mouseUp就会打开日历控件。
查看官网Demo发现确实存在这个问题,第一反应是日历控件的输入框绑定了onMouseUp事件,查看对应的DatePicker
组件源码,定位到文件ant-design/components/date-picker/generatePicker/generateSinglePicker.tsx
第121~156行
(基于antd@4.23.4版本,不同版本行数可能不同):
import RCPicker from 'rc-picker'; // 中间代码省略…… <RCPicker<DateType> ref={innerRef} placeholder={getPlaceholder(mergedPicker, locale, placeholder)} suffixIcon={suffixNode} dropdownAlign={transPlacement2DropdownAlign(direction, placement)} dropdownClassName={popupClassName || dropdownClassName} clearIcon={<CloseCircleFilled />} prevIcon={<span className={`${prefixCls}-prev-icon`} />} nextIcon={<span className={`${prefixCls}-next-icon`} />} superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />} superNextIcon={<span className={`${prefixCls}-super-next-icon`} />} allowClear transitionName={`${rootPrefixCls}-slide-up`} {...additionalProps} {...restProps} {...additionalOverrideProps} locale={locale!.lang} className={classNames( { [`${prefixCls}-${mergedSize}`]: mergedSize, [`${prefixCls}-borderless`]: !bordered, }, getStatusClassNames( prefixCls as string, getMergedStatus(contextStatus, customStatus), hasFeedback, ), className, )} prefixCls={prefixCls} getPopupContainer={customizeGetPopupContainer || getPopupContainer} generateConfig={generateConfig} components={Components} direction={direction} disabled={mergedDisabled} />
以上源码没有传入onMouseUp,将解构赋值prop的{...restProps}
注释掉,查看本地Demo,问题依然存在,说明restProps
也没有传入onMouseUp
。
由于DatePicker
组件是基于RCPicker
封装的,接下来继续深入RCPicker
组件,看看onMouseUp
是不是在RCPicker
里面绑定的。
rc-picker
是react-components
组件库中的日历组件,Ant Design大部分组件都是在react-components
基础上封装的。
查看rc-picker源码,rc-picker默认导出的是Picker组件:
import Picker from './Picker'; //... export default Picker;
定位到picker/src/Picker.tsx
,搜索字符串"onMouseUp",发现在日历控件输入框的父级div绑定了onMouseUp事件,对应的回调函数在287行(基于rc-picker@2.6.10):
// 输入框父级元素 L530~L555 <div ref={containerRef} className={classNames(prefixCls, className, { [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-focused`]: focused, [`${prefixCls}-rtl`]: direction === 'rtl', })} style={style} onMouseDown={onMouseDown} // 看这里 onMouseUp={onInternalMouseUp} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onContextMenu={onContextMenu} // 顺便关注一下这里,后文会说 onClick={onClick} > <div className={classNames(`${prefixCls}-input`, { [`${prefixCls}-input-placeholder`]: !!hoverValue, })} ref={inputDivRef} > {inputNode} {suffixNode} {clearNode} </div> </div> // onMouseUp回调 L287~L296 const onInternalMouseUp: React.MouseEventHandler<HTMLDivElement> = (...args) => { if (onMouseUp) { onMouseUp(...args); } // 问题就在这里 if (inputRef.current) { inputRef.current.focus(); triggerOpen(true); } };
就在函数onInternalMouseUp中,除了触发onMouseUp,还触发了输入框的focus事件!
if (inputRef.current) { inputRef.current.focus(); triggerOpen(true); }
此时,应该弄清楚一件事:当时为什么要写这几行代码?
最好的途径就是看看当时的commit message,为了方便后续调试,还是将rc-picker仓库克隆到本地:先Fork,再新建分支,然后安装依赖,启动项目。
PS:VSCode安装GitLens插件,即可查看每一行代码的commit记录。
从这几行代码对应的commit了解到,这几行代码是为了解决Ant Design的日历控件点击输入框右侧的icon没有弹出日历面板的问题。
知道它的作用了,已经成功了一半!看看要怎么修复?
第四步、问题修复
到这一步,建议先到对应的Issue下面留言说明正在处理中,避免其他开发者再花时间修复同一个问题。
接着,要解决2个问题:
- 点击日历控件输入框右侧的icon需要打开日历面板
- 不要用mouseUp事件来打开,想想其它实现方式
答案显而易见了,那就是改成在onClick里触发,因为icon节点同样被输入框的父级包裹,icon的click事件必然会冒泡到父级,从而触发父级的onClick。
查看以上源码发现,输入框的父级已经有一个onClick属性,只需要将以上的4行代码挪到onClick的回调即可,点击这里查看详细修改。
修改完成,查看本地Demo,问题已经解决了,胜利在望!
第五步、单元测试
原来的commit写了对应的单元测试,我们修改了它的实现,同时也需要修改对应的单元测试:
// picker/tests/picker.spec.tsx L620~631 it('Picker should open when click inside', () => { const onClick = jest.fn(); const wrapper = mount(<MomentPicker onClick={onClick} />); const inputElement = wrapper.find('input').instance() as any as HTMLInputElement; inputElement.focus = jest.fn(); wrapper.find('.rc-picker').simulate('click'); expect(inputElement.focus).toHaveBeenCalled(); expect(wrapper.isOpen()).toBeTruthy(); expect(onClick).toHaveBeenCalled(); });
修改完成之后,完整地跑一遍单元测试:
npm run test
确保所有单元测试都通过
Test Suites: 8 passed, 8 total
Tests: 294 passed, 294 total
Snapshots: 11 passed, 11 total
Time: 15.643s
代码部分到这里就算圆满完成了!
第六步、提交Pull Request
这一步,是本文最简单的一步了!
提交代码,push到远程仓库,打开仓库页面,会看到页面上出现了一个【compare & pull request】的入口,点击即可向Ant Design创建合并请求,输入修复的Issue链接(这个很重要,到时候Issue页面会自动关联你的此次的pull request)和修复思路或理由,方便管理员review。
最后,等待管理员review,没问题的话管理员会合并分支,然后发布新版本,代码最终会应用到数十万项目中,Bug修复大功告成!
总结
最后,总结一下,第一次提交PR,建议选择简单的Issue,重要的是先将整个流程熟悉一遍,不要一开始就挑战复杂的问题,如果花了很长时间却解决不了问题,自信心受挫,可能就不想继续下去了。
以上就是Ant Design 的Bug修复示例详解的详细内容,更多关于Ant Design Bug修复的资料请关注易盾网络其它相关文章!