reactjs - 与打字稿反应的按键事件

问题描述

各位晚上好，

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

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

当检测到按键时，插入需要立即发生。我正在尝试利用 React 按键事件，但需要一些额外的帮助。

我正在嗅探按键事件的文本框位于 a 中<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;

  }
}

标签： reactjstypescripteventskeyboardcharacter

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

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

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。这可能会导致糟糕的用户体验。

reactjs - 与打字稿反应的按键事件

问题描述

解决方案

推荐阅读