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

1 前言

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

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

...

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

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

2 效果

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

• 原版

• 现在

3 怎么做的？

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

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

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

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

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

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

（被封了别急，发现是封IP地址，换数据或者切个网络就行了）

所以我选择了另一个方案

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

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

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

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

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

3.2.2 直接调用回调【失败】

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

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

...

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

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

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

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

当然是不行～

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

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

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

这不是AntDesign么？好家伙，那有想法了。

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

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

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

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

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

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

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

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

4 总结

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

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

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

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

同时这提醒我们

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

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

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","特别牛逼")