自己做了一款实用 React 虚拟键盘组件，支持AntD，可用于触屏输入文本内容。

个人在做一个只有触屏的React前端开发，需要输入文本，找了一圈没有好用的React虚拟键盘插件。故自己写了一个，分享给大家。

代码如下：

文件名： VK.jsx

/*--
海皮智造 虚拟键盘 20200930
=============================================

React 内调用说明：
import { VirtualKeyboard } from './VK'
VirtualKeyboard 有2个参数，3个方法。
//
参数1：
VirtualKeyboard.isDisableEnter=true|false
是否禁用Enter键，默认为true。

参数2：
VirtualKeyboard.isDisableTab=true|false
是否禁用Tab键，默认为true。
------------------------
方法1：
.showKeyboardSetState(valueObject,reactComponent)
显示虚拟键盘，此方式主要用于Antd Input组件，由于Antd的输入组件直接修改dom的value不生效，故只能传入值Object对象。
valueObject 是一个Object，Object对象必须使用value属性来传递值。
reactComponent 是当前React Component，用于按键后setState更新显示。
如下例子：
let V={value:'123'}
<Input onClick={()=>VirtualKeyboard.showKeyboardSetState(V,this)} value={V.value}/>

方法2：
.showKeyboard(e)
显示虚拟键盘，此方式主要用于大部分模式。
参数e可是3种类型，
1、字符串，即要联动的dom的id
使用举例： VirtualKeyboard.showKeyboard("inputA")
2、直接是要联动的dom对象，
使用举例： VirtualKeyboard.showKeyboard(document.getElementById("xxx"))
3、鼠标/触摸事件
使用举例： <input onClick={VirtualKeyboard.showKeyboard} />

方法3：
.closeKeyboard()
用命令来关闭键盘，一般来说用不到。
--*/
import React from 'react';
import ReactDOM from 'react-dom';
class VK extends React.Component {
    C = [
        "~`", "!1", "@2", "#3", "$4", "%5", "^6", "&7", "*8", "(9", ")0", "_-", "+=", "Backspace",
        "Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "{[", "}]", "|\\",
        "CapsLock", "A", "S", "D", "F", "G", "H", "J", "L", "L", ":;", "\"'", "Enter",
        "Shift", "Z", "X", "C", "V", "B", "N", "M", "<,", ">.", "?/", "Space"]
    W = [, , , , , , , , , , , , , 120, 90, , , , , , , , , , , , , 90, 110, , , , , , , , , , , , 135, 140, , , , , , , , , , , 170]
    F_MouseDown = (e) => {
        e = e.nativeEvent
        if (e.button !== 0) return
        if (e.target.id.indexOf("VK_") !== 0) {
            if ((e.target.innerText === "Enter" && this.props.values.isDisableEnter === true) || (e.target.innerText === "Tab" && this.props.values.isDisableTab === true)) {
                return
            }