纯javascript代码修改react,vue 的输入框的值 |
您所在的位置：网站首页 › JavaScript修改网页日期 › 纯javascript代码修改react,vue 的输入框的值 |
|
一. react /** * @param inputDom 输入框DOM 比如：document.getElementById('userId') * @newText 新的文本 */ function changeReactInputValue(inputDom,newText){ let lastValue = inputDom.value; inputDom.value = newText; let event = new Event('input', { bubbles: true }); event.simulated = true; let tracker = inputDom._valueTracker; if (tracker) { tracker.setValue(lastValue); } inputDom.dispatchEvent(event); } //使用方法 var userIdDom = document.getElementById('userId'); //普通JS获取输入框Dom changeReactInputValue(userIdDom,'username'); //改变React的输入框的值二. vue vue 是通过input事件来触发双向绑定的，而你用单纯的js 去修改input值，并没有触发他的input事件，通过下方代码，进行触发即可。两种方式选其一即可。 1. event.target.dispatchEvent(new Event('input')); 2. el.dispatchEvent(new Event('input')); 其实input值中的value属性和v-model属性是有一定差异的。 input中v-model和value不能同时调用，可能会有问题 当使用如上代码时，输入框内并没有显示“请输入地名地址”字样，其原因是： v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定： v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示，仅会在初始化渲染时短暂显示。 来源： 纯javascript代码修改react 的输入框的值_lxyoucan的博客-CSDN博客 https://www.jianshu.com/p/3b84f29512d9 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |