Как имитировать нажатия клавиатуры в 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 на них реагировал правильно, как будто получает нажатия реальных кнопок "железной" клавиатуры?