如何仅在用户按下 Enter 按钮时进行搜索？

Question

我正在学习反应。
我有一个输入组件。

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

我有一个handleSearch功能，我只想在用户按下回车键时进行搜索。

  const handleSearch = (e) => {
    console.log(e.keyCode, e.keyCode, e.which); // undefined
      if (e.key === 'Enter' || e.keyCode === 13){
        // API CALL
        }
  }

但是当我打印console.log(e.keyCode, e.keyCode, e.which); 它返回undefined因为它现在已弃用。

那么我怎样才能实现我的目标呢？

Answer 1

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

OnKeyPress 返回您输入的键，并检查函数体中的条件

const handleSearch = (e) => {

  if (e.key === 'Enter' || e.keyCode === 13){
    // API CALL
    }}