Question

如何让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);

Answer 1

我正在使用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>
     );
}

Answer 2

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

onKeyDown检测到keyCode个事件。

Answer 3

对于我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键盘事件 https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

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>
        );
     }
});

Answer 5

React没有传递你可能想到的那种事件。相反，它正在通过synthetic events。

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

Answer 6

如果你想在动态输入::

中将动态参数传递给函数

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

希望这有助于某人。：）

Answer 7

参加晚会，但我试图在TypeScript中完成这项工作，并想出了这个：

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

这会打印按下屏幕的确切键。所以，如果你想回应所有＆＃34; a＆＃34;当div处于焦点时按下，你可以将e.key与＆＃34; a＆＃34;进行比较。 - 字面意思是（e.key ===＆＃34; a＆＃34;）。

Answer 8

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

有几点需要注意：

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

为了解决反应应用中的键盘事件，我实施了react-keyboard-event-handler。请看看。

Answer 9

您需要在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>
   )
}

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

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

还有许多其他属性

感谢与问候

PS：React版本：16.13.1

Answer 10

不建议使用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} /> 
}

Answer 11

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

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

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

11 个答案: