简单键盘回车事件

class App extends React.Component<connectedProps & RouteComponentProps> {

  public state = {
    form: {
      param: '',
    },

  // 监听输入框
  public changeInput = (e: any) => {
    // console.log(e.target, 'input');
    const value = e.target.value
    this.setState(() => (Object.assign(this.state.form, { param: value })))

  }
  
  监听键盘事件
  public search = (e) => {
  
  获取键盘keyCode值
  // console.log(e.keyCode,'code');
	
    if (e.keyCode === 13) {
      // 回车键为 13
      this.componentDidMount()
    }
  }

// public getList...
    
  public componentDidMount() {
    this.getList(this.state.form)
  }
  public render() {
    return (
 		<Input placeholder="请输入查找项目" onKeyUp={this.search} onChange={this.changeInput} maxLength={50} />
 	)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

键码表
https://www.cnblogs.com/hsapphire/archive/2009/12/16/1625642.html

keycode 0 = 
keycode 1 = 
keycode 2 = 
keycode 3 = 
keycode 4 = 
keycode 5 = 
keycode 6 = 
keycode 7 = 
keycode 8 = BackSpace BackSpace 
keycode 9 = Tab Tab 
keycode 10 = 
keycode 11 = 
keycode 12 = Clear 
keycode 13 = Enter 
keycode 14 = 
keycode 15 = 
keycode 16 = Shift_L 
keycode 17 = Control_L 
keycode 18 = Alt_L 
keycode 19 = Pause 
keycode 20 = Caps_Lock 
keycode 21 = 
keycode 22 = 
keycode 23 = 
keycode 24 = 
keycode 25 = 
keycode 26 = 
keycode 27 = Escape Escape 
keycode 28 = 
keycode 29 = 
keycode 30 = 
keycode 31 = 
keycode 32 = space space 
keycode 33 = Prior 
keycode 34 = Next 
keycode 35 = End 
keycode 36 = Home 
keycode 37 = Left 
keycode 38 = Up 
keycode 39 = Right 
keycode 40 = Down 
keycode 41 = Select 
keycode 42 = Print 
keycode 43 = Execute 
keycode 44 = 
keycode 45 = Insert 
keycode 46 = Delete 
keycode 47 = Help 
keycode 48 = 0 equal braceright 
keycode 49 = 1 exclam onesuperior 
keycode 50 = 2 quotedbl twosuperior 
keycode 51 = 3 section threesuperior 
keycode 52 = 4 dollar 
keycode 53 = 5 percent 
keycode 54 = 6 ampersand 
keycode 55 = 7 slash braceleft 
keycode 56 = 8 parenleft bracketleft 
keycode 57 = 9 parenright bracketright 
keycode 58 = 
keycode 59 = 
keycode 60 = 
keycode 61 = 
keycode 62 = 
keycode 63 = 
keycode 64 = 
keycode 65 = a A 
keycode 66 = b B 
keycode 67 = c C 
keycode 68 = d D 
keycode 69 = e E EuroSign 
keycode 70 = f F 
keycode 71 = g G 
keycode 72 = h H 
keycode 73 = i I 
keycode 74 = j J 
keycode 75 = k K 
keycode 76 = l L 
keycode 77 = m M mu 
keycode 78 = n N 
keycode 79 = o O 
keycode 80 = p P 
keycode 81 = q Q at 
keycode 82 = r R 
keycode 83 = s S 
keycode 84 = t T 
keycode 85 = u U 
keycode 86 = v V 
keycode 87 = w W 
keycode 88 = x X 
keycode 89 = y Y 
keycode 90 = z Z 
keycode 91 = 
keycode 92 = 
keycode 93 = 
keycode 94 = 
keycode 95 = 
keycode 96 = KP_0 KP_0 
keycode 97 = KP_1 KP_1 
keycode 98 = KP_2 KP_2 
keycode 99 = KP_3 KP_3 
keycode 100 = KP_4 KP_4 
keycode 101 = KP_5 KP_5 
keycode 102 = KP_6 KP_6 
keycode 103 = KP_7 KP_7 
keycode 104 = KP_8 KP_8 
keycode 105 = KP_9 KP_9 
keycode 106 = KP_Multiply KP_Multiply 
keycode 107 = KP_Add KP_Add 
keycode 108 = KP_Separator KP_Separator 
keycode 109 = KP_Subtract KP_Subtract 
keycode 110 = KP_Decimal KP_Decimal 
keycode 111 = KP_Divide KP_Divide 
keycode 112 = F1 
keycode 113 = F2 
keycode 114 = F3 
keycode 115 = F4 
keycode 116 = F5 
keycode 117 = F6 
keycode 118 = F7 
keycode 119 = F8 
keycode 120 = F9 
keycode 121 = F10 
keycode 122 = F11 
keycode 123 = F12 
keycode 124 = F13 
keycode 125 = F14 
keycode 126 = F15 
keycode 127 = F16 
keycode 128 = F17 
keycode 129 = F18 
keycode 130 = F19 
keycode 131 = F20 
keycode 132 = F21 
keycode 133 = F22 
keycode 134 = F23 
keycode 135 = F24 
keycode 136 = Num_Lock 
keycode 137 = Scroll_Lock 
keycode 138 = 
keycode 139 = 
keycode 140 = 
keycode 141 = 
keycode 142 = 
keycode 143 = 
keycode 144 = 
keycode 145 = 
keycode 146 = 
keycode 147 = 
keycode 148 = 
keycode 149 = 
keycode 150 = 
keycode 151 = 
keycode 152 = 
keycode 153 = 
keycode 154 = 
keycode 155 = 
keycode 156 = 
keycode 157 = 
keycode 158 = 
keycode 159 = 
keycode 160 = 
keycode 161 = 
keycode 162 = 
keycode 163 = 
keycode 164 = 
keycode 165 = 
keycode 166 = 
keycode 167 = 
keycode 168 = 
keycode 169 = 
keycode 170 = 
keycode 171 = 
keycode 172 = 
keycode 173 = 
keycode 174 = 
keycode 175 = 
keycode 176 = 
keycode 177 = 
keycode 178 = 
keycode 179 = 
keycode 180 = 
keycode 181 = 
keycode 182 = 
keycode 183 = 
keycode 184 = 
keycode 185 = 
keycode 186 = 
keycode 187 = acute grave 
keycode 188 = comma semicolon 
keycode 189 = minus underscore 
keycode 190 = period colon 
keycode 191 = 
keycode 192 = numbersign apostrophe 
keycode 193 = 
keycode 194 = 
keycode 195 = 
keycode 196 = 
keycode 197 = 
keycode 198 = 
keycode 199 = 
keycode 200 = 
keycode 201 = 
keycode 202 = 
keycode 203 = 
keycode 204 = 
keycode 205 = 
keycode 206 = 
keycode 207 = 
keycode 208 = 
keycode 209 = 
keycode 210 = plusminus hyphen macron 
keycode 211 = 
keycode 212 = copyright registered 
keycode 213 = guillemotleft guillemotright 
keycode 214 = masculine ordfeminine 
keycode 215 = ae AE 
keycode 216 = cent yen 
keycode 217 = questiondown exclamdown 
keycode 218 = onequarter onehalf threequarters 
keycode 219 = 
keycode 220 = less greater bar 
keycode 221 = plus asterisk asciitilde 
keycode 222 = 
keycode 223 = 
keycode 224 = 
keycode 225 = 
keycode 226 = 
keycode 227 = multiply division 
keycode 228 = acircumflex Acircumflex 
keycode 229 = ecircumflex Ecircumflex 
keycode 230 = icircumflex Icircumflex 
keycode 231 = ocircumflex Ocircumflex 
keycode 232 = ucircumflex Ucircumflex 
keycode 233 = ntilde Ntilde 
keycode 234 = yacute Yacute 
keycode 235 = oslash Ooblique 
keycode 236 = aring Aring 
keycode 237 = ccedilla Ccedilla 
keycode 238 = thorn THORN 
keycode 239 = eth ETH 
keycode 240 = diaeresis cedilla currency 
keycode 241 = agrave Agrave atilde Atilde 
keycode 242 = egrave Egrave 
keycode 243 = igrave Igrave 
keycode 244 = ograve Ograve otilde Otilde 
keycode 245 = ugrave Ugrave 
keycode 246 = adiaeresis Adiaeresis 
keycode 247 = ediaeresis Ediaeresis 
keycode 248 = idiaeresis Idiaeresis 
keycode 249 = odiaeresis Odiaeresis 
keycode 250 = udiaeresis Udiaeresis 
keycode 251 = ssharp question backslash 
keycode 252 = asciicircum degree 
keycode 253 = 3 sterling 
keycode 254 = Mode_switch

参考
javascript如何获得按键的keycode:https://blog.youkuaiyun.com/simon_xu_sh/article/details/42644131

<think> 首先,用户的问题是:“我想查找在React中响应键盘回车事件的方法 请问React中如何响应键盘回车事件”。这明确表示用户想知道如何在React中监听和处理回车按键事件。 从系统指令中: - 所有行内数学表达式必须使用$...$格式,但这里没有数学内容,所以不需要。 - 独立公式必须使用$$...$$格式,但问题不涉及数学。 - LaTeX语法正确:确保所有代码显示正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,例如[^1]。 用户提供了参考站内引用: - 引用[1]:如何在React中监听键盘事件。提到了事件处理机制。 - 引用[2]:具体代码示例,在input元素上添加onKeyUp事件监听器,检查e.keyCode === 13来判断回车键。 用户说:“上述引用仅供参考,并不是用户真正的需求”,所以我需要基于用户的问题来回答,而不是直接复制引用。用户的问题是响应回车事件,所以我应该专注于那个。 我的回答结构应该清晰,帮助用户逐步解决问题。基于指令,确保回答真实可靠。 关键点: - 在React中,键盘事件可以通过事件处理函数来监听。 - 回车键的keyCode是13,或者在现代浏览器中,可以使用e.key === 'Enter'。 - 代码示例应该清晰,使用代码块格式。 步骤: 1. **介绍键盘事件监听**:解释React中的事件处理机制。 2. **监听回车事件**:具体说明如何绑定事件监听器到元素上。 3. **检查回车键**:在事件处理函数中检查是否是回车键。 4. **代码示例**:提供一个完整的例子。 5. **添加引用标识**:由于用户提供了引用,在相关部分末尾添加[^1]和[^2]。 6. **生成相关问题**:在回答结束时,添加相关问题部分。 回答结构: - 开头:简要概述如何在React中响应回车事件。 - 主体:分步解释。 - 代码示例:使用代码块。 - 结尾:总结。 - 相关问题:生成2-3个相关问题。 生成相关问题: 基于主题,例如: 1. 如何优化键盘事件处理? 2. 在React中如何处理其他键盘事件,如Esc键? 3. 键盘事件在表单中的应用? 确保语言是中文。 最终回答大纲: 1. 解释键盘事件监听。 2. 描述绑定事件的方法。 3. 提供代码示例。 4. 添加引用。 5. 相关问题。 </think> ### React中如何响应键盘回车事件 在React中,响应键盘回车事件主要通过事件处理机制实现。开发者可以为DOM元素(如input框)绑定键盘事件监听器,并在回调函数中检查按键是否为回车键(keyCode为13或key值为'Enter')。这种方法简单高效,能提升用户体验,例如在表单提交时代替点击按钮[^1]。下面我将分步解释实现过程: #### 步骤1: 理解键盘事件监听机制 React使用合成事件(SyntheticEvent)处理DOM事件,类似于原生JavaScript的事件监听,但更安全和跨浏览器兼容。常用的事件属性包括: - `onKeyDown`:按键按下时触发。 - `onKeyUp`:按键释放时触发(推荐用于回车事件,避免重复触发)。 - 事件对象的属性:`e.keyCode`(旧浏览器)或`e.key`(现代浏览器)用于识别按键[^2]。 #### 步骤2: 绑定事件监听器到元素 在组件中,为input或button等元素添加事件监听器属性(如`onKeyUp`),并定义回调函数。例如: ```jsx import React, { Component } from 'react'; class MyComponent extends Component { handleKeyUp = (e) => { // 检查是否为回车键 if (e.key === 'Enter' || e.keyCode === 13) { console.log('回车键被按下'); this.handleSubmit(); // 调用提交函数 } }; handleSubmit = () => { // 处理业务逻辑,如发送网络请求 console.log('提交数据'); }; render() { return ( <input type="text" placeholder="输入内容后按回车" onKeyUp={this.handleKeyUp} // 绑定键盘释放事件 /> ); } } export default MyComponent; ``` 在这个示例中: - `onKeyUp`事件绑定到input元素上,用户释放按键时会触发`handleKeyUp`函数。 - `e.key === 'Enter'`或`e.keyCode === 13`检查是否为回车键(兼容新旧浏览器)。 - 如果检测到回车键,则调用`handleSubmit`函数执行后续操作,如发送API请求。 #### 步骤3: 使用函数组件简化(推荐React Hooks) 在函数组件中,可以使用`useState`和事件处理函数更简洁地实现: ```jsx import React, { useState } from 'react'; function EnterKeyHandler() { const [inputValue, setInputValue] = useState(''); const handleKeyUp = (e) => { if (e.key === 'Enter') { handleSubmit(); } }; const handleSubmit = () => { alert(`提交的内容: ${inputValue}`); // 这里可以添加网络请求逻辑 }; return ( <div> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyUp={handleKeyUp} // 直接绑定事件 placeholder="输入后按回车提交" /> </div> ); } export default EnterKeyHandler; ``` - 优势:代码更简洁,易于维护,使用`e.key`确保兼容现代浏览器[^2]。 - 注意:在React中,事件监听器会自动清理以减少内存泄漏。 #### 最佳实践和注意事项 - **事件选择**:优先使用`onKeyUp`而非`onKeyDown`,避免在按键持续按下时重复触发。 - **性能优化**:对于大量元素,使用事件委托(例如在父元素监听)提升性能。 - **兼容性**:旧项目可能需要`e.keyCode`,但新项目推荐`e.key`(更规范)。 - **错误处理**:确保事件处理函数正确绑定,避免`this`指向问题(使用箭头函数或bind)。 通过这种方法,您可以在表单、搜索框等场景中实现回车提交,替代点击事件,优化用户交互流程[^1][^2]。 如果您有具体场景(如在函数组件中使用钩子),可以提供更多细节,我可以进一步调整代码。 ### 相关问题 1. 如何防止键盘事件在React中被频繁触发? 2. 在React中如何响应其他特殊键(如Esc或Tab键)? 3. React中的事件委托如何应用于键盘事件处理?
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值