Question

大家晚上好，

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

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

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

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

  }
}

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

代码可以试用here。

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

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

与打字稿反应的按键事件

1 个答案: