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

最新推荐文章于 2023-10-25 17:54:32 发布

祈澈菇凉

最新推荐文章于 2023-10-25 17:54:32 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_36538012/article/details/103033509

版权

本文详细介绍了如何在React中使用onKeyUp事件监听键盘操作，特别关注于如何在用户按下回车键时捕获输入框的值，并展示了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1：标签绑定键盘件

<input onKeyUp={this.inputKeyUp}></input>

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

//键盘事件
inputKeyUp=(e)=>{
    console.log(e.keyCode)
}

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

if(e.keyCode==13){
    alert(e.target.value)
}

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

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;