React-键盘事件示例

轻鸟评职场技能 2024-05-04 05:22:18
import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { msgInit: '通过键盘在文本框输入字符后在浏览器Console中显示对应的ASCII码', alertInfo: '按回车键,msg值为:',}class KeyBind extends React.Component { constructor(props) { super(props); this.state = { msg: infoMap.msgInit, } } keyUp = (e) => { console.log(e.keyCode); if (e.keyCode === 13) { alert(infoMap.alertInfo + e.target.value); } } render() { return ( <div> <h2>{infoMap.msgInit}</h2> <input type="text" onKeyUp={this.keyUp} /> </div> ) }}const KeyboardEventExample = () => { return ( <span> <KeyBind/> </span> )}export default KeyboardEventExample;

按回车键,效果:

0 阅读:4