如何处理 ReactJS 中的 `onKeyPress` 事件？

Posted 2023-02-21

【中文标题】如何处理 ReactJS 中的 `onKeyPress` 事件？

【英文标题】：How to handle the `onKeyPress` event in ReactJS?

【发布时间】：2015-03-05 19:21:41

【问题描述】：

如何使onKeyPress 事件在 ReactJS 中工作？当按下 enter (keyCode=13) 时它应该会发出警报。

var Test = React.createClass(
    add: function(event)
        if(event.keyCode == 13)
            alert('Adding....');
        
    ,
    render: function()
        return(
            <div>
                <input type="text" id="one" onKeyPress=this.add />    
            </div>
        );
    
);

React.render(<Test />, document.body);

【问题讨论】：

自从v0.11 React 将关键代码标准化为可读字符串。我建议使用这些而不是 keyCodes。

@RandyMorris react 并不总是正确地规范化键码。生成“+”将为您提供 187 的键代码值，其中 shiftKey = true 但是“键”值将解析为“未识别”。

【参考方案1】：

React 中的键盘事件 到目前为止，凭借您对 React 事件的一般知识，您现在可以在 React 中实现键盘事件。如前所述，可以使用两个键盘事件，keyup 和 keydown 事件。

import React from 'react';

function Quiz()
    handleAnswerChange(event)
        if(event.key === 'y')
            alert('The sky is your starting point!')
    
        else if (event.key === 'n') 
            alert('The sky is your limit?')
    


    return (
        <div>
                <p> Are You Smart?</p>
                    <input type="text" value=answer onKeyPress=handleAnswerChange/>
                <small> Press Y for Yes or N for No</small>
    </div>
)

【参考方案2】：

这对我有用，通过访问窗口元素使用钩子

useEffect(() => 
    window.addEventListener('keypress', e => 
      console.log(e.key)
    );
  , []);

【参考方案3】：

你需要在你的 keyPress 事件上调用 event.persist(); 这个方法。 示例：

const MyComponent = (props) => 
   const keyboardEvents = (event) =>
       event.persist();
       console.log(event.key); // this will return string of key name like 'Enter'
   
   return(
         <div onKeyPress=keyboardEvents></div>
   )

如果您现在在 keyboardEvents 函数中键入 console.log(event)，您将获得其他属性，例如：

keyCode // number
charCode // number
shiftKey // boolean
ctrlKey // boolean
altKey // boolean

还有许多其他属性

感谢和问候

PS：React 版本：16.13.1

【参考方案4】：

对我来说 onKeyPress e.keyCode 始终是 0，但 e.charCode 具有正确的值。如果使用onKeyDown，则e.charCode中的正确代码。

var Title = React.createClass(
    handleTest: function(e) 
      if (e.charCode == 13) 
        alert('Enter... (KeyPress, use charCode)');
      
      if (e.keyCode == 13) 
        alert('Enter... (KeyDown, use keyCode)');
      
    ,
    render: function() 
      return(
        <div>
          <textarea onKeyPress=this.handleTest />
        </div>
      );
    
  );

React Keyboard Events.

【讨论】：

..因此，如果您对使用箭头键和/或其他非字母数字键感兴趣，onKeyDown 适合您，因为它们不会返回 keyChar 而是 keyCode。

对于那些有兴趣自己尝试 React keyEvents 的人，这是我创建的 codesandbox。

【参考方案5】：

Keypress 事件已弃用，您应该改用 Keydown 事件。

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) 
    if(event.keyCode === 13)  
        console.log('Enter key pressed')
  


render()  
    return <input type="text" onKeyDown=this.handleKeyDown /> 

【讨论】：

它还支持event.key === 'Enter'。看看here。

【参考方案6】：

我正在使用 React 0.14.7，使用 onKeyPress 和 event.key 效果很好。

handleKeyPress = (event) => 
  if(event.key === 'Enter')
    console.log('enter press here! ')
  

render: function()
     return(
         <div>
           <input type="text" id="one" onKeyPress=this.handleKeyPress />
        </div>
     );

【讨论】：

你可以在测试中模拟它：Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),key:"Enter");

实验性是什么意思？我认为使用 ES6 "functionName(param) => " 会起作用吗？

@Waltari 是 ES6 arrow function，意思是function handleKeyPress(event)...

它还绑定this

也许它是迂腐的，但值得注意的是，最好使用严格相等 === 检查 event.key == 'Enter'。

【参考方案7】：

var Test = React.createClass(
     add: function(event)
         if(event.key === 'Enter')
            alert('Adding....');
         
     ,
     render: function()
        return(
           <div>
            <input type="text" id="one" onKeyPress=(event) => this.add(event)/>    
          </div>
        );
     
);

【参考方案8】：

在按键事件方面存在一些挑战。 Jan Wolter's article on key events 有点老了，但很好地解释了为什么关键事件检测很难。

需要注意的几点：

keyCode、which、charCode 在 keypress 与 keyup 和 keydown 中具有不同的值/含义。它们均已弃用，但在主流浏览器中均受支持。 操作系统、物理键盘、浏览器（版本）都可能对键码/值产生影响。 key 和 code 是最新的标准。但是，在撰写本文时，浏览器还没有很好地支持它们。

为了处理 React 应用程序中的键盘事件，我实现了react-keyboard-event-handler。请看一下。

【参考方案9】：

如果你想将动态参数传递给函数，在动态输入中::

<Input 
  onKeyPress=(event) => 
    if (event.key === "Enter") 
      this.doSearch(data.searchParam)
    
  
  placeholder=data.placeholderText />
/>

希望这对某人有所帮助。 :)

【讨论】：

它对我有用

【参考方案10】：

聚会迟到了，但我试图在 TypeScript 中完成这项工作并想出了这个：

<div onKeyPress=(e: KeyboardEvent<htmlDivElement>) => console.log(e.key)

这会将按下的确切键打印到屏幕上。因此，如果您想在 div 处于焦点时响应所有“a”按下，您可以将 e.key 与“a”进行比较——字面意思是 if(e.key === "a")。

【讨论】：

这似乎不起作用。 ***.com/questions/43503964/…

【参考方案11】：

React 不会传递您可能认为的那种事件。相反，它正在传递synthetic events。

在简短的测试中，event.keyCode == 0 始终为真。你要的是event.charCode

【讨论】：

这并不影响问题。按下 Enter 时不会更改 keyCode 等于 13。

我只是不断为e.key || e.keyCode || e.charCode获取合成函数

【参考方案12】：

render: function()
     return(
         <div>
           <input type="text" id="one" onKeyDown=this.add />
        </div>
     );

onKeyDown 检测到keyCode 事件。

【讨论】：

通常是通过 onKeyUp 检测到回车键 - 这允许用户在他决定停止交互时停止交互。使用 keyPress 或 keyDown 立即执行。