【react】解决在外部设置react组件input的value问题

背景：

为了快速输入账号，密码，写了一个插件，但由于输入部分用了antd，改变value并不能通过校验。

解决思路：

能否模拟用户键盘输入，这样避免直接设置value校验不通过的问题。

找到的办法：

react页面专属，因为react16内部定义了descript拦截value,所以派发事件，无法触发input所绑定的事件，需要重置输入状态；

function set(dom,num,value){let inputLabel = dom; //这里获取需要自动录入的input内容let lastValue = inputLabel[num].value;inputLabel[num].value = value;let event = new Event("input", { bubbles: true });//  React15event.simulated = true;//  React16 内部定义了descriptor拦截value，此处重置状态let tracker = inputLabel[num]._valueTracker;if (tracker) {tracker.setValue(lastValue);}inputLabel[num].dispatchEvent(event);
}setTimeout(()=>{set($(".ant-input"),0,'账号');set($(".ant-input"),1,'密码');
},200)

【react】解决在外部设置react组件input的value问题相关推荐

[react] 你有使用过loadable组件吗？它帮我们解决了什么问题？
[react] 你有使用过loadable组件吗?它帮我们解决了什么问题? 目前有两个 react-loadable和 loadable component,用于代码分割,解决打包体积过大的问题个人 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
【React教学】通用型DataTable组件——400行内
2019独角兽企业重金招聘Python工程师标准>>> 其实严格意义来说,应该将Pagination(分页处理)和数据加载(AjaxLoad)作为一个独立的组件来处理,不过为了方便展 ...
【React+ts】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd（保姆式教学）
前提你需要准备好node.js版本不低于6.14.8 和 git 文章内容比较长(保姆级别教程),全是干货,请耐心看完通过create-react-app脚手架搭建项目 1.第一步注: 项目名称 ...
【前端框架】react框架第四章 react组件进阶
目录 1. 组件的props 特点 2. 组件通迅的三种方式父组件传递数据给子组件子组件传递数据组父组件兄弟组件 3. Context Context使用步骤 4. props深入 props校 ...
React 中非受控和受控的组件
React 中非受控和受控的组件 React 中非受控和受控的组件受控的组件非受控的组件小结 React 中非受控和受控的组件两者都是呈现 HTML 表单元素的 React 组件.这意味着,每 ...
React Native使用指南-原生UI组件
在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如Scr ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
React Native的键盘遮挡问题（input／webview里）
2017-06-15 1:使用keyVoaidView来解决注意要设置behavio="absolute",哎.记性差好像拼错了 2:使用下面的代码,监听键盘,然后将webVi ...

【react】解决在外部设置react组件input的value问题

背景：

【react】解决在外部设置react组件input的value问题相关推荐

最新文章

热门文章