React 中的 onKeyPress
onKeyPress
是文本字段的接口的一部分。它可以用于所有主要的 JavaScript 框架,包括 React。当你希望每次用户在你的字段中键入字母、数字或其他内容时执行函数时,此事件处理程序会很有用。你还可以指定哪个键应触发事件的执行。
React 中的 onKeyPress
根据 MDN 的官方文档,不推荐使用 onKeyPress
事件。MDN 的开发人员不建议使用它。但是,不要失去希望 - 有一个可行的替代方案,我们将在本文的后面部分讨论。
如果你想使用已弃用的 onKeyPress
事件,这里是如何在 React 中处理 onKeyPress
事件。
class App extends Component {
render() {
console.log('App started');
this.handleKeyPress = (e) => {
if (e.key === 'Enter') {
console.log('You must have pressed Enter ')
}
} return (<div><input type = 'textfield' id = 'text' onKeyPress = {
this.handleKeyPress
} />
</div>);
}
}
此解决方案适用于 React 0.14.7 版。
此解决方案使用命名的 key
属性来检查用户是否按下了 Enter 键。
if (e.key === 'Enter') {
console.log('You must have pressed Enter ')
}
或者,你也可以使用 charCode
或 charKey
属性在用户按下特定键后触发事件。同样,让我们看看如何有条件地检查用户是否按下了 Enter 键,该键的 charCode
为 13。
代码示例:
if (e.charCode === 13) {
console.log('You must have pressed Enter ')
}
如果用这个替换以前使用的条件,结果将是相同的。事实上,charCode
属性使用起来更安全,因为它在浏览器中比命名的 key
属性得到更广泛的支持。
keyCode
属性不太可预测。在上面的例子中,如果我们 console.log(e.keyCode)
,我们会看到一个 0
。这是因为一些新的编码环境不支持它。如果你在编写应用程序时遇到此问题,你可以使用 charCode
作为替代。
React 中的 onKeyPress
与 onKeyDown
onKeyPress
已被 HTML 开发人员弃用。2021 年秋季,许多主要浏览器仍然支持它,但是一旦发布了更新的浏览器版本,对 onKeyPress 的支持就会减少。因此,除非你有使用 onKeyPress
的非常具体的原因,请改用 onKeyDown
,它的作用基本相同,但略有不同。
keyPress
事件仅针对产生字母数字值的键盘键触发。这些包括用于键入空格的所有字母、数字、标点符号和键。修饰键,例如 Alt、Shift 或 Ctrl 不能触发 onKeyPress
事件。
每次按下任何键时都会触发 onKeyDown
。生成字母数字值的键与不生成字母数字值的键之间没有区别。按下 Backspace 和 Caps Lock 等键盘键将生成 onKeyDown
事件,但不会生成 onKeyPress
。
React 中的 onKeyDown
除了上面提到的细微差别之外,onKeyDown
事件本质上与 onKeyPress
相同。最重要的区别在于,它目前在所有主要浏览器中都得到支持,并且将在未来几年内得到支持。
onKeyDown
也更加一致,无论你使用哪个 React 版本。
以下是相同的解决方案如何与 onKeyDown
一起使用:
class App extends Component {
render() {
console.log('App started');
this.handleKeyDown = (e) => {
if (e.keyCode === 13) {
console.log('You must have pressed Enter ')
}
} return (<div><input type = 'textfield' id = 'text' onKeyDown = {
this.handleKeyDown
} />
</div>);
}
}
请注意,为了检查触发 onKeyDown
事件的键,我们使用了 keyCode
属性,该属性无法通过 onKeyPress
访问。
if (e.keyCode === 13) ```
同样,我们也可以使用命名的 `key` 属性:
```javascript
if (e.key === 'Enter') ```
无论哪种方式,如果我们选择输入并单击 <kbd>Enter</kbd> 两次,这就是我们的控制台的样子:
![React 中的 onKeyDown](</img/React/console onKeyDown.webp>)
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn