Reactjs react with typescript中的按键事件

各位晚上好,

我正在编写一个方法，当在文本框中按特定字符（或键）时，该方法应插入特定字符串。在本例中，该字符是不可打印的字符，在大多数字体族中不提供视觉表示，但仍然可以检测到

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

输入：U+0030=>输出：“”
输入：U+0029=>输出：“”

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

我正在嗅探按键事件的文本框位于

中，以下是我到目前为止的代码：

  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;

  }
}

private onKeyDown=（e:React.KeyboardEvent）=>{
开关（电子钥匙）{
大小写字符串。fromCharCode（4）：
//textbox.append（“”）不确定如何实现
打破
大小写字符串。fromCharCode（29）：
//textbox.append（“”）不确定如何实现
打破
大小写字符串。fromCharCode（30）：
//textbox.append（“”）不确定如何实现
打破
}
}

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

如注释中所述，此处使用受控输入是正确的。我总结了一个简短的例子：

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

从“React”导入React；
导出默认函数App（）{
const[input，setInput]=React.useState（“”）；
常量handleInput=（事件：React.ChangeEvent）=>{
setInput（event.target.value）；
};
const handleKeyDown=（事件：React.KeyboardEvent）=>{
if（[9112].indexOf（event.keyCode）！=-1）{
event.preventDefault（）；
event.stopPropagation（）；
}
console.log（event.keyCode）；
开关（event.keyCode）{
案例9：
setInput（`${input}`）；
打破
案例112：
setInput（`${input}`）；
打破
违约：
打破
}
};
返回(
值：“{input}”
);
}

代码可以试用

首先，您会看到一个包含输入值的状态。然后是

onChange

处理程序，它只将当前值写入状态。聚焦输入时，对每个按下的键调用

handleKeyDown

事件。您需要注意以下几点：

• 防止默认操作，以便捕获的关键点不会干扰其他任何操作。例如，您希望在点击选项卡时保持输入的焦点
• 还要停止传播，因为您已经操作了输入值，所以其他事件不应与此相同
• 本例中未涉及的是，如果按多个键会发生什么情况。例如，CTRL Backspace。这可能会导致糟糕的用户体验

---

您将希望您的

文本框

是一个受控输入-您可以在其中设置

值

属性。@Patrick为您做了这项工作吗？