React合成事件：如何捕获按下Enter键？

15 浏览
0 Comments

React合成事件：如何捕获按下Enter键？

为什么下面的事件保留了 \'event.target\' 的值，但没有保留 \'event.code\' 的值？\nimport React, { useState, useEffect } from \'react\';\nimport moment from \'moment\';\nimport { subscribeToTimer } from \'./api\';\nimport \'./App.css\';\nfunction App() {\n function getInput(e) {\n console.log(e.target);\n console.log(e.code);\n }\n return (\n <>\n Hello World!\n getInput(e)} />\n \n );\n}\nexport default App;\n在React中如何捕获输入元素的 \'Enter\' 键按下事件？

0

1 答案

0 Comments

React Synthetic Event: 如何捕获按下回车键？

问题原因：在React的合成事件中，没有code键。

解决方法：可以使用event.key === 'Enter'或event.keyCode === 13来检查按下的键是否是回车键。

原文中提到，DOM中的onkeyup事件确实有与之关联的'code'属性！当按下回车键时，'event.code'会记录为'Enter'。但是React的合成事件中没有这个属性，这就导致了困惑。

通过上述解决方法，我们可以在React中捕获到回车键的按下事件。

0