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

• 2019 年 11 月 11 日
• 筆記

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;