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;