如何在reactjs上检测Esc按键?与jquery类似的事情
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
一旦检测到,我想传递信息向下组件。我有3个组件,其中最后一个活动组件需要对退出键按下做出反应。
我正在考虑在组件变为活动时进行注册
class Layout extends React.Component {
onActive(escFunction){
this.escFunction = escFunction;
}
onEscPress(){
if(_.isFunction(this.escFunction)){
this.escFunction()
}
}
render(){
return (
<div class="root">
<ActionPanel onActive={this.onActive.bind(this)}/>
<DataPanel onActive={this.onActive.bind(this)}/>
<ResultPanel onActive={this.onActive.bind(this)}/>
</div>
)
}
}
以及所有组件
class ActionPanel extends React.Component {
escFunction(){
//Do whatever when esc is pressed
}
onActive(){
this.props.onActive(this.escFunction.bind(this));
}
render(){
return (
<input onKeyDown={this.onActive.bind(this)}/>
)
}
}
我相信这会奏效,但我认为这更像是回调。有没有更好的方法来解决这个问题?
答案 0 :(得分:132)
如果您正在寻找文档级关键事件处理,那么在componentDidMount
期间绑定它是最好的方式(如to_string
所示):
class ActionPanel extends React.Component {
constructor(props){
super(props);
this.escFunction = this.escFunction.bind(this);
}
escFunction(event){
if(event.keyCode === 27) {
//Do whatever when esc is pressed
}
}
componentDidMount(){
document.addEventListener("keydown", this.escFunction, false);
}
componentWillUnmount(){
document.removeEventListener("keydown", this.escFunction, false);
}
render(){
return (
<input/>
)
}
}
请注意,您应确保在卸载时删除键事件侦听器,以防止潜在错误和内存泄漏。
答案 1 :(得分:15)
您希望从React SyntheticKeyBoardEvent
keyCode
听取逃避onKeyDown
(27):
const EscapeListen = React.createClass({
handleKeyDown: function(e) {
if (e.keyCode === 27) {
console.log('You pressed the escape key!')
}
},
render: function() {
return (
<input type='text'
onKeyDown={this.handleKeyDown} />
)
}
})
问题评论中的Brad Colthurst's CodePen有助于查找其他密钥的密钥代码。
答案 2 :(得分:8)
在功能组件中完成此操作的另一种方法是使用useEffect
和useFunction
,如下所示:
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
const handleEsc = (event) => {
if (event.keyCode === 27) {
console.log('Close')
}
};
window.addEventListener('keydown', handleEsc);
return () => {
window.removeEventListener('keydown', handleEsc);
};
}, []);
return(<p>Press ESC to console log "Close"</p>);
}
您可以使用useState
代替console.log来触发某些操作。
答案 3 :(得分:6)
有关可重用的React hook解决方案
import React, { useEffect } from 'react';
const useEscape = (onEscape) => {
useEffect(() => {
const handleEsc = (event) => {
if (event.keyCode === 27)
onEscape();
};
window.addEventListener('keydown', handleEsc);
return () => {
window.removeEventListener('keydown', handleEsc);
};
}, []);
}
export default useEscape
用法:
const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))
答案 4 :(得分:5)
React使用SyntheticKeyboardEvent来包装本机浏览器事件,此Synthetic事件提供named key attribute,
您可以这样使用:
handleOnKeyDown = (e) => {
if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
// select item
e.preventDefault();
} else if (e.key === 'ArrowUp') {
// go to top item
e.preventDefault();
} else if (e.key === 'ArrowDown') {
// go to bottom item
e.preventDefault();
} else if (e.key === 'Escape') {
// escape
e.preventDefault();
}
};
答案 5 :(得分:0)
如果你想直接在你的组件中而不是在一个钩子中使用它,或者如果你像我一样在一个不返回 useEffect(()=>{
document.addEventListener('keydown', (e) => {
e.key === 'Escape' && setOpenState(false)
})
return () => {
document.removeEventListener('keydown', (e) => e)
}
},[openState])