Material UI 输入框无法检测到按下回车键的事件。

Question

我正在使用Material UI来开发React项目，但是无法检测到回车键被按下的事件。我已经尝试了以下代码，但仍然无法检测该事件，不确定我漏了什么。

我有一个自定义的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"
  }}
/>

- p_waves

---

onKeyDown - https://dev59.com/clcQ5IYBdhLWcg3wEPoK按键事件 - https://dev59.com/clcQ5IYBdhLWcg3wEPoK - Sarun UK

谢谢，在这个帖子中找到了答案。 - p_waves

Answer 1

根据Material UI文档，只有当字段的值发生更改时，才会调用onChange事件回调。

根据使用情况，尝试使用onKeyPress或onKeyUp、onKeyDown事件。

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

- Shashank Garg

Answer 2

keyCode和charCode已被弃用。

现在使用key方法来检测Enter键。

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

- Ericgit

Answer 3

onkeypress事件也已被弃用。

我选择使用onKeyDown代替，像这样：

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

参考：https://www.w3schools.com/jsref/event_onkeypress.asp

- hlx