React开发中如何实现仅按下回车键才触发搜索的功能？

问题原因 #

你当前绑定的是onChange事件，该事件的触发时机为输入框内容发生变化时，对应的事件对象是React ChangeEvent，本身不包含key、keyCode这类键盘事件专属属性，这是你拿到undefined的核心原因，和keyCode废弃没有直接关联。

解决方案 #

方案1：绑定键盘事件触发搜索 #

将事件绑定修改为onKeyDown（键盘按下事件），此时拿到的事件对象为KeyboardEvent，可直接通过标准属性e.key判断是否按下回车键：

1. 组件绑定修改：

<InputText
  isdisabled={false}                                      
  placeholder="Type something and press enter to search..."
  type="text"
  name="search-table"                    
  onKeyDown={(e) => handleSearch(e)}                    
/>

2. 逻辑函数修改：

const handleSearch = (e) => {
  if(e.key === 'Enter') {
    const searchValue = e.target.value
    // 此处执行搜索API调用
  }
}

注意：如果你的InputText是自定义封装组件，需要确认组件内部已经将原生onKeyDown事件透传至上层，否则事件不会触发。

方案2：同时绑定输入事件和键盘事件（适合需要实时监听输入内容的场景） #

如果需要边输入边做实时校验、联想提示等逻辑，可以同时绑定两个事件，将输入内容存入state后，回车时直接读取state值发起搜索：

import { useState } from 'react'

function SearchComponent() {
  const [searchVal, setSearchVal] = useState('')

  // 监听输入变化存储内容
  const handleInputChange = (e) => {
    setSearchVal(e.target.value)
  }

  // 监听回车触发搜索
  const handleSearch = (e) => {
    if(e.key === 'Enter') {
      // 直接用已存储的searchVal调用搜索接口即可
    }
  }

  return (
    <InputText
      isdisabled={false}                                      
      placeholder="Type something and press enter to search..."
      type="text"
      name="search-table"                    
      onChange={handleInputChange}
      onKeyDown={handleSearch}                    
    />
  )
}

补充说明 #

keyCode确实已被官方标准废弃，目前主流浏览器虽然还做了兼容处理，但生产环境优先使用e.key做判断即可，完全符合规范要求。

内容的提问来源于stack exchange，提问作者diana