不小心找到了快手招聘官网的BUG

17,560 阅读4分钟

1 前言

大家好,我是心锁,一枚23届准毕业生。

7月28日,快手开启了秋招提前批,在这个背景下,我当然要投一份简历

...

本来一切都很正常,但是写简历的时候猛得发现,快手招聘这简历编辑虽然搭得蛮好看,但是总觉得有些地方漏了啥~

啊我懂了,原来是快手简历编辑的IT技能这里只有HTML5Web前端两个选项能体现我的(前端)技能。

image-20220731225112990

image-20220731225042232

2 效果

我的基本目的是「 IT技能 」这栏可以填写其他的技能类别,后来我发现这其实还适用于其他选项

  • 原版

image-20220731230953254

  • 现在

    image-20220731232407833

178F7C1386019C474CA4119FC8DE206B

3 怎么做的?

0E9417AA32C9237EE375B432C56D18F4

我这里其实给出了两个方案,一个简单一个好玩

3.1 「方案一」修改请求体⚠️

直接把修改传递给接口的值,这也是最容易实现的方法

image-20220731231632523

我们只要修改itSkills中的itSkillCode以及familiarDegreeCode即可修改成功

image-20220731234045358

作为最没有意思的叼毛方法,所以我们使用的当然不是这个方案

image-20220731234213784

而且这样做貌似会出问题,可能会被检测到然后锁IP......所以不要尝试不要尝试!!!

image-20220731234721498 (被封了别急,发现是封IP地址,换数据或者切个网络就行了)

所以我选择了另一个方案

3.2 「方案二」修改input值☑️

大哥停一下脚步,先别急着返回和取消点赞,没有那么简单,怎么可能只是简单地修改表单呢

43885F5E1F8C7FF2B3392D297C855609

3.2.1 直接修改input.value【失败】

我们当然可以尝试修改input,但是修改后你就会发现是没有效果的(即便修改后提交也不行)

image-20220801001053240

image-20220801000533321

为啥呢?显然是因为我们修改input并不能触发相关的事件,快手招聘的官网是用React写的,而React并没有实现双向绑定,所以修改input.value并不能使得表单数据变化。

1020055674B596C2B83948ADE0679D33

3.2.2 直接调用回调【失败】

那怎么办?我第一想法是oninput,但是这同样不可行,并没有注册相关方法

image-20220801001814347

3.2.3 直接调用React上的方法【成功】

...

等等,为什么非要原生方法呢?我们能不能直接调React方法

这就是本文的重点了,且看下边

image-20220801002958216

我们发现,这个input元素上存在一些奇怪的key其中有一项__reactEventHandlers$xxx

展开后发现这里也带着一个value,那么我们直接修改行么?

image-20220801004031590

当然是不行~

5B0CBBCEA2FDA8DF3C96308AB1B3D61E

同理,这里没有双向绑定,表单数据没有存在这里。

那么我们调用onChange试试,当然仍然很遗憾,并不行,这里提供的方法跑不起来,并不能成功赋值给表单

image-20220801005442239

image-20220801005415971

那应该怎么处理?突然我看到了这个眼熟的className

image-20220801004304214

这不是AntDesign么?好家伙,那有想法了。

直接用ReactComponents解析React的DOM结构,我们可以找到input的上层组件Selector

image-20220801004452754

那么我们知道其实这就是AntDesign的一个下拉选择器组件,而我们平时是怎么使用这个组件的?

最基本的用法,给Select组件的props传递onChange

image-20220801004741516

那么我们结合ReactCompoments找到组件的element

image-20220801004928940

image-20220801004948612

然后在控制台稍稍选中这个组件~

image-20220801005055559

展开一看,woc,虽然Selector上并没有我们想要的onChange方法,但是我们拿到Selector组件的children,而这个children中更是很直接给出了所有的props

image-20220801005615187

在这种情况下,我们调用onChange尝试,因为理论上Selector上的onChange应该透传到里边(就当瞎试)

image-20220801010016454

291DCF06E2020A21C160A4AA8D569195

然后就生效了,本来还想着保存会不会裂开,但是保存摁下去是非常顺畅地成功了~

image-20220801010531374

4 总结

或许有人想着知道这个有啥用

6BF7891F3FC7B4A36092E734C69A3802

我的回答是不一定有用,但是确实可以玩。这里的实战价值是可以脱离React修改某些状态,在面对input这种非受控但是被封装的组件是有奇效的。

如下图是我曾写过的,在某些特定场景下某组件库的Input组件无法支持粘贴的问题的解决方案

image-20220801011520940

虽然大概很难再有用的机会,但是多懂一些呗

C37237B03E45FED8C2828C6F7ABB93B9

同时这提醒我们

  • 有必要在提交前进行一次表单校验
  • 后台可不能信任前端来的数据,啥都有可能

最后,附带一份DEMO代码,可以上去试试,把Selector元素的选择器复制成第一个参数,第二个参数则填希望的数值即可。

image-20220801011021526
const changeTheValue = (selector, value) => {
  const ele = document.querySelector(selector);
  const keyName = Object.keys(ele).find(
    (item) => ~item.indexOf("__reactEventHandler")
  );
  const props = ele[keyName].children.props;
  props.onChange(value)
};

changeTheValue("#root > div.layout-container > div.body-container > div > div.user-center-layout-container > div > div.resume-edit-container > div.form-container > form > div:nth-child(7) > div > div:nth-child(1) > div:nth-child(2) > div.ant-col.ant-form-item-control > div > div > div > div","特别牛逼")