Как имитировать нажатия клавиатуры в React.JS

Для промышленной панели оператора (нет клавиатуры, только сенсорный дисплей) пишу приложение и в нём потребовалась виртуальная цифровая клавиатура. Вся клавиатура работает на редактирование одного элемента Input, ссылку на который я получил через Ref, private textInput: any = React.createRef();

Виртуальная цифровая клавиатура

Например мне надо нажать BackSpace (стрелка <-), на кнопку со стрелкой, вешаю обработчик
onClick={()=>this.backSpaceKey()}

  private backSpaceKey(){
    this.setUserKeyBoardEvent('Backspace')
  }

  private setUserKeyBoardEvent(key: string) {

    var ev = new KeyboardEvent('keydown',
    { key ,
      bubbles: true,
      cancelable: false,
    });
      this.textInput.current.dispatchEvent(ev);
  }

Так вот, клики на виртуальный BackSpace не приводят к реакции на Input. Я сравнивал события от реальной и виртуальной кнопки, есть различия в объектах событий:

| Реальная                | Виртуальная             |  
| ----------------------- | ----------------------- |   
|cancelable:true          |cancelable:false         |  
|isTrusted:true           |isTrusted:false          |  
|key:"Backspace"          |key:"Backspace"          |  
|keyCode:8                |keyCode:0                |  
|nativeEvent:KeyboardEvent|nativeEvent:KeyboardEvent|  
|{isTrusted: true,        |{isTrusted: false,       |  
|key: "Backspace",        |key: "Backspace",        |  
|code: "Backspace", …}    |code: ""                 |  
|type:"keydown"           |type:"keydown"           |  
|view:Window {: Window... |view:null                |  
|which:8                  |which:0                  |  

Как в React сделать, чтобы виртуальные кнопки отправляли на Input правильные события, чтобы Input на них реагировал правильно, как будто получает нажатия реальных кнопок "железной" клавиатуры?


Ответы (0 шт):