按下回车键时未检测到材质 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')
}}