Блог

Главная - Вопросы по программированию - Событие нажатия клавиши в react с помощью машинописного текста

Событие нажатия клавиши в react с помощью машинописного текста

#reactjs #typescript #events #keyboard #character

Вопрос:

Всем добрый вечер,

Я пишу метод, который должен вставлять определенную строку при нажатии определенного символа (или клавиши) в текстовое поле. В этом случае символ является непечатаемым символом, который не обеспечивает визуального представления в большинстве семейств шрифтов, но все еще обнаруживается.

 Input: U 0030 => Output: '<TAG1>'
Input: U 0029 => Output: '<TAG2>'

Вставка должна произойти немедленно при обнаружении нажатия клавиши. Я пытаюсь использовать событие нажатия клавиши React, но мне нужна дополнительная помощь.

Текстовое поле , для которого я отслеживаю события нажатия клавиш, находится в <FormField> , вот мой код до сих пор:

   private onKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
  switch (e.key) {
    case String.fromCharCode(4):
      //textbox.append("<TAG>") unsure how to implement
      break;
    case String.fromCharCode(29):
      //textbox.append("<TAG>") unsure how to implement
      break;
    case String.fromCharCode(30):
      //textbox.append("<TAG>") unsure how to implement
      break;

  }
}

Комментарии:

1. Вы захотите, чтобы ваш textbox вход был управляемым — там, где вы задаете value свойство.

Ответ №1:

Несмотря на то, что это кажется довольно простой задачей, вам нужно быть осторожным, чтобы не создавать плохой пользовательский интерфейс при работе с такими событиями.

Как упоминалось в комментариях, здесь правильно использовать контролируемый ввод. Я привел короткий пример:

 import React from "react";

export default function App() {
  const [input, setInput] = React.useState("");

  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInput(event.target.value);
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if ([9, 112].indexOf(event.keyCode) !== -1) {
      event.preventDefault();
      event.stopPropagation();
    }
    console.log(event.keyCode);
    switch (event.keyCode) {
      case 9:
        setInput(`${input}<TAB>`);
        break;
      case 112:
        setInput(`${input}<F1>`);
        break;
      default:
        break;
    }
  };

  return (
    <div className="App">
      <input
        type="text"
        value={input}
        onChange={handleInput}
        onKeyDown={handleKeyDown}
      />
      <div>Value: "{input}"</div>
    </div>
  );
}

Код можно опробовать здесь.

Сначала вы видите состояние, содержащее входное значение. За ним следует onChange обработчик, который просто записывает текущее значение в состояние. handleKeyDown Событие вызывается при каждом нажатии клавиши при фокусировке ввода. Вам нужно быть осторожным в отношении следующего:

  • Предотвратите действия по умолчанию, чтобы захваченные ключи не мешали чему-либо еще. Например, вы хотите, чтобы ввод был сфокусирован при TABпопадании.
  • Также прекратите распространение, потому что вы уже манипулируете входным значением, поэтому никакие другие события не должны повторяться.
  • Что не рассматривается в примере, так это то, что произойдет, если вы нажмете несколько клавиш. Например CTRL—Backspace. Это может привести к плохому пользовательскому интерфейсу.
Метки: