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","特别牛逼")
复制代码