![](/d/jc/2022092516/w5yp3u2t3ny48.webp)
react监听键盘事件的方法:
React中有监听键盘按下事件onKeyUp或者onKeyDown属性(以下用onKeyUp),值为自定义方法keyUp,即onKeyUp={this.keyUp}。
通过事件对象e的e.keyCode获取到当前键盘按键对应的按键码,enter键为13。
通过事件对象e的e.target.value获取元素的值。
import React, {Component} from 'react' import '../assets/css/index.css' export default class Test extends Component { constructor(props) { super(props) this.state = { msg: '我是一个Test组件' } } keyUp = (e) => { console.log(e.keyCode) if (e.keyCode === 13) { alert(`按了回车键,msg值为:${e.target.value}`) } } render() { return ( <div> <h2>我是一个Test组件</h2> <input onKeyUp={this.keyUp}/> </div> ) } }
相关学习推荐:react视频教程
以上就是react怎样监听键盘事件的详细内容,更多请关注易知道|edz.cc其它相关文章!