按下 Enter 键时未检测到 Material UI 输入

Question

我在 React 项目中使用 Material UI，无法检测何时按下 Enter 键。我已经尝试了以下我认为应该有效的方法，但仍然无法检测到该事件，不确定我错过了什么。

我有一个自定义 MUI 组件

const [search, setSearch] = useState('');

const handleChange = (event) => {
 setSearch(event.target.value);
  if (event.keyCode == 13) {
    console.log('enter key was pressed');
   }
 }

<SearchBox
  value={search}
  onChange={handleChange}
  placeholder="enter your search here"
  }}
/>

Answer 1

根据 Material UI Docs， 仅当字段值更改时才会调用onChange事件回调

根据用例尝试使用onKeyPress或onKeyUp、onKeyDown事件

onKeyPress={(event) => {
   if (event.keyCode === '13'){
      console.log('enter key was pressed');      
}}

Answer 2

keyCode并charCode已弃用。

而是使用key方法来检测密钥Enter。

onKeyPress={(event) => {
  if (event.key === 'Enter')
    console.log('Enter Pressed')
}}