|
|
|
@ -29,6 +29,54 @@ $ npm run build # 编译
|
|
|
|
|
$ npm run watch # 开发模式
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## React中使用
|
|
|
|
|
|
|
|
|
|
[react-hotkeys](https://github.com/jaywcjlove/react-hotkeys),安装如下:
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
npm i -S react-hot-keys
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
例子
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import Hotkeys from 'react-hot-keys';
|
|
|
|
|
|
|
|
|
|
export default class HotkeysDemo extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
output: 'Hello, I am a component that listens to keydown and keyup of a',
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onKeyUp(keyName, e, handle) {
|
|
|
|
|
console.log("test:onKeyUp", e, handle)
|
|
|
|
|
this.setState({
|
|
|
|
|
output: `onKeyUp ${keyName}`,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
onKeyDown(keyName, e, handle) {
|
|
|
|
|
console.log("test:onKeyDown", keyName, e, handle)
|
|
|
|
|
this.setState({
|
|
|
|
|
output: `onKeyDown ${keyName}`,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<Hotkeys
|
|
|
|
|
keyName="shift+a,alt+s"
|
|
|
|
|
onKeyDown={this.onKeyDown.bind(this)}
|
|
|
|
|
onKeyUp={this.onKeyUp.bind(this)}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ padding: "50px" }}>
|
|
|
|
|
{this.state.output}
|
|
|
|
|
</div>
|
|
|
|
|
</Hotkeys>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 使用
|
|
|
|
|
|
|
|
|
|