使用 Formik Form 检测 Input Chakra UI 元素的“删除”键 onKeyPress

问题描述

我有一个 Chakra UI Input 元素，例如在 Formik Form 中：

import { Formik,useField,Form,useFormikContext } from "formik";
import {
  Input } from "@chakra-ui/react";

          <Formik
            // setup stuff
          >
            <Form>
              <Input
                id={field.name}
                onChange={field.onChange}
                placeholder={placeholder}
                value={field.value}
                onKeyPress={(event) => {
                  console.log("event = ",event)
                  console.log("event.key = ",event.key)
                  if (event.key === "Backspace") {
                    console.log("pressed backspace")
                  }
                }}
              />

我得到了字母键的打印输出，但是当我在 macOS 10.15.7 的 Google Chrome 版本 91.0.4472.114（官方版本）(x86_64) 中按 delete 键时无法打印输出

有人知道我做错了什么吗？

这是我在键盘上按下字母 R 时 event 的打印输出

event =  
SyntheticBaseEvent {_reactName: "onKeyPress",_targetInst: null,type: "keypress",nativeEvent: KeyboardEvent,target: input#player3.chakra-input.css-1q4t59,…}
altKey: false
bubbles: true
cancelable: true
charCode: 82
code: "KeyS"
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 3
getModifierState: ƒ modifierStateGetter(keyArg)
isDefaultPrevented: ƒ functionThatReturnsFalse()
isPropagationStopped: ƒ functionThatReturnsFalse()
isTrusted: true
key: "R"
keyCode: 0
locale: undefined
location: 0
MetaKey: false
nativeEvent: KeyboardEvent {isTrusted: true,key: "R",code: "KeyS",location: 0,ctrlKey: false,…}
repeat: false
shiftKey: true
target: input#player3.chakra-input.css-1q4t59
timeStamp: 643207.7999999998
type: "keypress"
view: Window {window: Window,self: Window,document: document,name: "",location: Location,…}
which: 82
_reactName: "onKeyPress"
_targetInst: null

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）