React.js中onKeyPress事件仅执行首个if语句 空格键判断分支不生效

问题根因 #

• 键盘事件的key属性中，空格键对应的返回值为单个空格字符" "，你代码中写的"Space"是code属性的返回值，属性匹配错误导致空格分支永远无法触发。
• 额外冗余配置：type="text"的原生input默认支持输入，不需要额外添加contentEditable="true"属性，该属性一般用于非表单元素实现可编辑能力。

修复方案 #

方案1：修正key属性的匹配值 #

直接修改判断条件为正确的空格字符即可：

const twoCalls = (e) => {
    if (e.key === "Enter") {
        console.log("enter");
        handleClick()
        // 不需要输入框插入回车可添加 e.preventDefault()
    } else if (e.key === " ") {
        console.log("space");
        toSVG()
        // 不需要输入框插入空格可添加 e.preventDefault()
    }
}

方案2：改用code属性做判断（更稳定） #

code属性对应物理按键的编码，不受输入法、大小写切换等场景的影响，兼容性更好：

const twoCalls = (e) => {
    if (e.code === "Enter") {
        console.log("enter");
        handleClick()
    } else if (e.code === "Space") {
        console.log("space");
        toSVG()
    }
}

内容的提问来源于stack exchange，提问作者MultiThunderXXL