纯javascript代码修改react 的输入框的值

背景

我们有一个老的项目在维护，项目是使用react-dom@16.8.6实现的。也就是react开发的，但是因为某种原因，暂时找不到源码了。时间紧任务重，必须赶紧解决问题。

简化需求： 有一个react实现的文本输入框，我要实现页面加载完成后自动赋值一个默认的值。

失败的代码： 一开始我尝试直接修改

var usernameInput = document.getElementsByName('userId')[0];
usernameInput.value='new value'

这个表面上没有问题，实际上这样做，不被react识别。表现就是文本框内容确实有了，但是当用户点击时就自动消失了。

代码实现

let input = someInput; 
let lastValue = input.value;
input.value = 'new value';
let event = new Event('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16 内部定义了descriptor拦截value，此处重置状态
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue);
}
input.dispatchEvent(event);

方法封装与使用

/**
* @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的输入框的值

参考

https://github.com/facebook/react/issues/11488