在react里实现点击回车键执行事件
生活随笔
收集整理的這篇文章主要介紹了
在react里实现点击回车键执行事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在網頁應用里，我們搜索、提交賬戶名密碼等等操作的過程中，不太經常會去一個個用鼠標點擊提交或者執行某個按鈕類型的操作。對于我個人而言，直接用回車鍵就很順手了，鼠標還要去定位，很麻煩。
這幾天在搭建一個前后端交互應用app的，最后完善項目一些細節的時候想要加上這個小小的便捷操作功能。
項目是用react+antd-mobile搭建的。如果是用JavaScript代碼實現的話，直接在body標簽里綁定onKeyDown事件，點擊該事件，判斷keyCode是不是等于13 - -13代表對回車鍵的監聽。如果是，執行點擊事件。代碼如下：
如果是在react當中，需要在按鈕上綁定一個onClick事件和一個onkeyDown事件，邏輯是一樣的。不同的是要在生命周期函數componentDidUpdate()中綁定一下監聽。代碼：
//render()內部 componentDidUpdate(){document.addEventListener('keydown',this.onkeydown);}handleSend = ()=>{ //要執行的代碼}onkeydown = (e)=>{if (e.keyCode === 13) {this.handleSend()}}//這里的InputItem是antd-mobile里的一個輸入框組件 <InputItem ...//省略一些無關的代碼 extra={ <span onClick={this.handleSend} onKeyDown={(e)=>this.onkeydown(e)}>發送</span> } />總結
以上是生活随笔為你收集整理的在react里实现点击回车键执行事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac系统如何查看更新R版本
- 下一篇： 秉火429笔记之十四 USART--串口