AntDesign的Bug修复示例详解

引言

我在工作中大量使用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个问题：

答案显而易见了，那就是改成在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修复的资料请关注本站其它相关文章！

标签 , , ,

发表回复