在 React 中检测 2 个键的 onKeyPress
Detect onKeyPress for 2 keys in React
我有一个 input
元素,上面有 onKeyPress
属性。
<input type="text" onKeyPress={this.keyPressed}
我想知道何时按下 Enter 或 Escape 并采取相应行动。
keyPressed: function(e) {
if (e.key == 'Enter') {
console.log('Enter was pressed!');
}
else if (e.key == 'Escape') {
console.log('Escape was pressed!');
}
else {
return;
}
}
我能够检测到何时按下 Enter 但在按下 Escape 时无法检测到。
编辑
- e.charCode == 27(不工作)
- e.keyCode == 27(不工作)
- e.key == 'Escape'(不工作)
- e.key == 'Esc'(不工作)
更新:
我已经设法让它工作了。
检查我的答案:
在输入元素上
我用 onKeyDown
作为 属性 而不是 onKeyPress
。
在此处阅读更多内容:https://facebook.github.io/react/docs/events.html#keyboard-events
在我的函数中,
- 我使用
e.key == 'Escape'
作为我的 if()
声明的条件。
成功了。
出于某种我懒得去理解的原因,Enter 似乎可以在 onKeyPress
上工作,而 Escape 却不行't.
您将通过以下方式获得关键代码:
const code = event.keyCode || event.which;
class App extends React.Component {
state={code:''};
onKeyPress(event) {
const code = event.keyCode || event.which;
this.setState({code})
}
render() {
return (
<div>
<input onKeyPress={this.onKeyPress.bind(this)} />
<span> Key Code : {this.state.code}</span>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('section'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section />
function useKeyPress(keys, onPress) {
keys = keys.split(' ').map((key) => key.toLowerCase())
const isSingleKey = keys.length === 1
const pressedKeys = useRef([])
const keyIsRequested = (key) => {
key = key.toLowerCase()
return keys.includes(key)
}
const addPressedKey = (key) => {
key = key.toLowerCase()
const update = pressedKeys.current.slice()
update.push(key)
pressedKeys.current = update
}
const removePressedKey = (key) => {
key = key.toLowerCase()
let update = pressedKeys.current.slice()
const index = update.findIndex((sKey) => sKey === key)
update = update.slice(0, index)
pressedKeys.current = update
}
const downHandler = ({ key }) => {
const isKeyRequested = keyIsRequested(key)
if (isKeyRequested) {
addPressedKey(key)
}
}
const upHandler = ({ key }) => {
const isKeyRequested = keyIsRequested(key)
if (isKeyRequested) {
if (isSingleKey) {
pressedKeys.current = []
onPress()
} else {
const containsAll = keys.every((i) => pressedKeys.current.includes(i))
removePressedKey(key)
if (containsAll) {
onPress()
}
}
}
}
useEffect(() => {
window.addEventListener('keydown', downHandler)
window.addEventListener('keyup', upHandler)
return () => {
window.removeEventListener('keydown', downHandler)
window.removeEventListener('keyup', upHandler)
}
}, [])
}
这样使用:
function testUseKeyPress() {
const onPressSingle = () => {
console.log('onPressSingle!')
}
const onPressMulti = () => {
console.log('onPressMulti!')
}
useKeyPress('a', onPressSingle)
useKeyPress('shift h', onPressMulti)
}
我有一个 input
元素,上面有 onKeyPress
属性。
<input type="text" onKeyPress={this.keyPressed}
我想知道何时按下 Enter 或 Escape 并采取相应行动。
keyPressed: function(e) {
if (e.key == 'Enter') {
console.log('Enter was pressed!');
}
else if (e.key == 'Escape') {
console.log('Escape was pressed!');
}
else {
return;
}
}
我能够检测到何时按下 Enter 但在按下 Escape 时无法检测到。
编辑
- e.charCode == 27(不工作)
- e.keyCode == 27(不工作)
- e.key == 'Escape'(不工作)
- e.key == 'Esc'(不工作)
更新:
我已经设法让它工作了。
检查我的答案:
在输入元素上
我用
onKeyDown
作为 属性 而不是onKeyPress
。在此处阅读更多内容:https://facebook.github.io/react/docs/events.html#keyboard-events
在我的函数中,
- 我使用
e.key == 'Escape'
作为我的if()
声明的条件。
成功了。
出于某种我懒得去理解的原因,Enter 似乎可以在 onKeyPress
上工作,而 Escape 却不行't.
您将通过以下方式获得关键代码:
const code = event.keyCode || event.which;
class App extends React.Component {
state={code:''};
onKeyPress(event) {
const code = event.keyCode || event.which;
this.setState({code})
}
render() {
return (
<div>
<input onKeyPress={this.onKeyPress.bind(this)} />
<span> Key Code : {this.state.code}</span>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('section'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section />
function useKeyPress(keys, onPress) {
keys = keys.split(' ').map((key) => key.toLowerCase())
const isSingleKey = keys.length === 1
const pressedKeys = useRef([])
const keyIsRequested = (key) => {
key = key.toLowerCase()
return keys.includes(key)
}
const addPressedKey = (key) => {
key = key.toLowerCase()
const update = pressedKeys.current.slice()
update.push(key)
pressedKeys.current = update
}
const removePressedKey = (key) => {
key = key.toLowerCase()
let update = pressedKeys.current.slice()
const index = update.findIndex((sKey) => sKey === key)
update = update.slice(0, index)
pressedKeys.current = update
}
const downHandler = ({ key }) => {
const isKeyRequested = keyIsRequested(key)
if (isKeyRequested) {
addPressedKey(key)
}
}
const upHandler = ({ key }) => {
const isKeyRequested = keyIsRequested(key)
if (isKeyRequested) {
if (isSingleKey) {
pressedKeys.current = []
onPress()
} else {
const containsAll = keys.every((i) => pressedKeys.current.includes(i))
removePressedKey(key)
if (containsAll) {
onPress()
}
}
}
}
useEffect(() => {
window.addEventListener('keydown', downHandler)
window.addEventListener('keyup', upHandler)
return () => {
window.removeEventListener('keydown', downHandler)
window.removeEventListener('keyup', upHandler)
}
}, [])
}
这样使用:
function testUseKeyPress() {
const onPressSingle = () => {
console.log('onPressSingle!')
}
const onPressMulti = () => {
console.log('onPressMulti!')
}
useKeyPress('a', onPressSingle)
useKeyPress('shift h', onPressMulti)
}