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

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

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;
相关文章
|
7月前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
95 0
|
4月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
46 4
|
22天前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
4月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
66 1
|
4月前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
31 0
|
6月前
|
前端开发 JavaScript
vue的v-model、v-if、v-for用react语法实现
vue的v-model、v-if、v-for用react语法实现
|
7月前
|
前端开发 JavaScript 安全
React中的JSX:语法与原理深入解析
【4月更文挑战第25天】本文深入解析React中的JSX,一种JavaScript语法扩展,使代码更直观。JSX让开发者以HTML样式描述组件UI,但最终编译成JavaScript。通过Babel转换,JSX标签转为React.createElement()调用,创建虚拟DOM。JSX的优势在于直观性、类型安全、代码复用和工具支持,助力高效开发React组件,适应不断发展的Web应用需求。
|
7月前
|
前端开发 JavaScript 开发者
如何在React中监听键盘事件
如何在React中监听键盘事件
198 0
|
7月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
74 0
|
7月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
225 1