在web开发中回车确认是一个经常用到的功能

下面是一个demo

import { Input } from 'antd'
import { useState } from 'react'

function App() {
  const [inputValue, setInputValue] = useState<string>('')
  const myEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // console.log(e.keyCode) 13
    // do sth
  }

  const valueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }

  return (
    <>
      <Input type='text' placeholder='请输入工单号后4位, eg: 03a2'
        value={inputValue}
        onPressEnter={myEnter}
        onChange={valueChange}
      />
    </>
  )
}

export default App

等价于:

import { Input } from 'antd'
import { useState } from 'react'

function App() {
  const [inputValue, setInputValue] = useState<string>('')
  
  const myKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(e.keyCode)

    if (e.keyCode === 13) { 
      //send request
      // do sth
    }
  }

  const valueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }

  return (
    <>
      <Input type='text' placeholder='请输入工单号后4位, eg: 03a2'
        value={inputValue}
        onChange={valueChange}
        onKeyDown={myKeyDown}
      />
    </>
  )
}

export default App

常见 e.keyCode映射：

键盘键	e.keyCode
return	13
tab	9
esc	27
\	220

如果想让自己的app更智能，可以添加一些快捷键