利用React特性模拟数据输入

By admin at 2020-03-21 • 0人收藏 • 1207人看过

感谢aardio大群:  驴G 分享代码和思路, 收藏备用


主要是react的事件机制特殊,好像是把所有的事件绑在了document对象上

所以光改值的时候会被框架的代码拦截 需要再模拟一个事件让它冒泡传递到document上去

import win.ui;
import web.blink.portable;
import web.blink.form;
/*DSG{{*/
var winform = win.form(cls="AR_FORM";text="react-demo";right=660;bottom=400)
winform.add(
button={cls="button";text="Button";left=554;top=91;right=622;bottom=129;z=2};
custom={cls="custom";text="自定义控件";left=0;top=0;right=520;bottom=400;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

//关闭窗口前
winform.onClose = function(){
    //先隐藏窗口,别让用户觉得卡
    winform.show(false);
}

var wb = web.blink.form(winform.custom);

//显示窗体
winform.show() 

//创建嵌入HTTP服务器
import wsock.tcp.simpleHttpServer;
wb.go(wsock.tcp.simpleHttpServer.startUrl("/res/index.html"));
/**
wb.go("https://www.baidu.com");
**/
wb.wait();


winform.button.oncommand = function(id,event){
	wb.doScript(`
		let input = document.getElementById("demo")
		let lastValue = input.value;
		input.value = '这里写入你需要的值';

		let event = new Event('input', { bubbles: true });
		// react支持的事件 https://reactjs.org/docs/events.html#supported-events
		// hack React15
		event.simulated = true;
		
		// hack React16 内部定义了descriptor拦截value,此处重置状态
		let tracker = input._valueTracker;

    	if (tracker) {
  			tracker.setValue(lastValue);
		}
		input.dispatchEvent(event);
	
	`);
}

win.loopMessage();


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...