一. 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不能同时调用,可能会有问题
<input type="text" v-model="keyWord" value="请输入地名地址" >
当使用如上代码时,输入框内并没有显示“请输入地名地址”字样,其原因是:
v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定: v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示,仅会在初始化渲染时短暂显示。
来源:
纯javascript代码修改react 的输入框的值_lxyoucan的博客-CSDN博客
https://www.jianshu.com/p/3b84f29512d9