纯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不能同时调用，可能会有问题

<input type="text" v-model="keyWord" value="请输入地名地址" >

当使用如上代码时，输入框内并没有显示“请输入地名地址”字样，其原因是：

v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：　v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示，仅会在初始化渲染时短暂显示。

来源：

纯javascript代码修改react 的输入框的值_lxyoucan的博客-优快云博客
https://www.jianshu.com/p/3b84f29512d9