与打字稿反应的按键事件答案

【问题标题】：Key press event in react with typescript与打字稿反应的按键事件
【发布时间】：2021-06-14 05:52:26
【问题描述】：

大家晚上好，

我正在编写一个方法，该方法应在将特定字符（或键）按下到文本框中时插入特定字符串。在这种情况下，该字符是不可打印的字符，在大多数字体系列中不提供视觉表示，但仍可检测到。

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;

  }
}

【问题讨论】：

您会希望您的 textbox 成为受控输入 - 您可以在其中设置 value 属性。

标签： reactjs typescript events keyboard character

【解决方案1】：

尽管这似乎是一项相当简单的任务，但您需要注意不要在处理此类事件时造成糟糕的用户体验。

正如 cmets 中提到的，受控输入在这里是正确的。我整理了一个简短的例子：

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>
  );
}

代码可以试用here。

首先您会看到一个包含输入值的状态。接下来是onChange 处理程序，它只是将当前值写入状态。 handleKeyDown 事件在聚焦输入时为每个按下的键调用。您需要注意以下几点：

阻止默认操作，因此捕获的键不会与其他任何东西混淆。例如，您希望在点击 TAB 时保持输入的焦点。
同时停止传播，因为您已经操纵了输入值，因此其他事件不应与此相同。
示例中未解决的是，如果您按下多个键会发生什么。例如 CTRL-Backspace。这可能会导致糟糕的用户体验。

【讨论】：