ReactJs - onKeyPress事件处理

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 Keyboard Events https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

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 5

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

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

Answer 6

React并没有传递你可能想到的那种事件.相反,它正在传递合成事件.

在简短的测试中,event.keyCode == 0总是如此.你想要的是什么event.charCode

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

Answer 8

如果要将动态参数传递给函数，请在动态输入内部：

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

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

Answer 9

除了onKeyPress被弃用之外，我认为这onKeyUp是一个比 更好的选择onKeyDown，因为直到释放密钥后才会执行它

<Element
   onKeyUp={(e) => {
        if (e.key === "Enter") console.log('Enter has press);
   }}
/>

Answer 10

晚了聚会，但是我试图在TypeScript中完成这项工作并提出了以下建议：

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

这将打印在屏幕上的确切键。因此，如果要在div处于焦点状态时响应所有“ a”按下，则可以将e.key与“ a”进行比较-字面上是if（e.key ===“ a”）。

Answer 11

按键事件方面存在一些挑战。扬·沃尔特（Jan Wolter）关于关键事件的文章有些陈旧，但是很好地解释了为什么很难检测关键事件。

注意事项：

1. keyCode，which，charCode具有不同的值/从KEYUP和KEYDOWN在按键的意思。它们均已弃用，但在主要浏览器中受支持。
2. 操作系统，物理键盘，浏览器（版本）都可能对键代码/值产生影响。
3. key并且code是最新标准。但是，在撰写本文时，浏览器还没有很好地支持它们。

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