前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React基础语法02-onKeyUp键盘事件

React基础语法02-onKeyUp键盘事件

作者头像
王小婷
发布2019-11-10 23:48:02
2.8K0
发布2019-11-10 23:48:02
举报
文章被收录于专栏:编程微刊编程微刊

onKeyUp监听键盘事件,当键盘抬起的时候,触发方法inputKeyUp.

1:标签绑定键盘件

代码语言:javascript
复制
<input onKeyUp={this.inputKeyUp}></input>

2:keyCode获取你按得是什么键

代码语言:javascript
复制
//键盘事件
inputKeyUp=(e)=>{
    console.log(e.keyCode)
}

3:继续实现 按回车键的时候,拿到值,首先监听KeyUp或者KeyDown事件,进行判断,当keyCode==13的时候,表示键盘按下,获取值。

代码语言:javascript
复制
if(e.keyCode==13){
    alert(e.target.value)
}

这个时候,在input框输入值,按下键盘,就能弹出输入的数据了

代码语言:javascript
复制
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
    constructor() {
        super();
        //react定义数据
        this.state = {
        }
    }
    //键盘事件
    inputKeyUp = (e) => {
        //console.log(e.keyCode);
        if (e.keyCode == 13) {
            alert(e.target.value)
        }
    }
    render() {
        return (
            <div>
                <input onKeyUp={this.inputKeyUp}></input>
            </div>
        )
    }
}
export default Home;
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档