react怎样监听键盘事件

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怎样监听键盘事件的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏