React.js只读取第一个if语句

Question

我正在制作一个文本框，它要么在输入时使用handlesclick，要么在空格单击时将文本更改为SVG。但是，react只考虑第一个if语句，使用else可以工作，但是else if会被完全忽略。

文本框代码:

<input type="text" id="textbox" contentEditable="true" className="grinputbox"
onChange={(e) => {setInput(e.target.value)}}
onKeyPress={twoCalls}
/>

TwoCalls功能:

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

按回车键会输入控制台日志，但是按空格

没有空格

Answer 1

不存在"Space"这样的key属性。当用户按下空格键时，要检查的值是一个文字空格字符:" "。您可以直接从https://keycode.info/(按空格)或间接从MDN文档中找到它。(说明"如果按下的键具有打印表示，则返回值是一个非空Unicode字符串，其中包含键的可打印表示。")

简而言之，替换

else if (e.key === "Space" )

else if (e.key === " " )

Answer 2

• 有不同的e.key,e.code在key一些浏览器返回空间作为" "和在一些旧的浏览器返回它作为"Spacebar"如果你想要最支持的空间与key你可以使它像下面

if(e.key === "Enter") {
//Some code
} else if(e.key === " " || e.key === "Spacebar") {
//Some code
}

• 另一边还有e.code它会以Space的形式返回空格如果你想使用Space你可以这样编写代码

if(e.key === "Enter") {
//Some code
} else if(e.code === "Space") {
//Some code
}

• 但是为了更好的支持使用e.key，这里有一个键值列表
• 还有一些其他的东西，比如e.keyCode已经被弃用了，所以不要使用

Answer 3

我想这是因为:e.key === 'Space'应该是e.key === 'Spacebar'