Як поводитися з подією `onKeyPress` в ReactJS?

Як я можу змусити роботу 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);

Я працюю з 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>
     );
}

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

onKeyDownвиявляє keyCodeподії.

Для мене завжди , але має правильне значення. Якщо використовується правильний код у .onKeyPresse.keyCode0e.charCodeonKeyDowne.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>
      );
    }
  });

Реагуйте на події на клавіатурі .

Подія клавіші застаріла, замість неї слід використовувати подію 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.keyCode == 0завжди правда. Те, що ти хочеш, так і єevent.charCode

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

Якщо ви хотіли передати динамічний парам до функції, всередині динамічного вводу:

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

Сподіваюся, що це комусь допоможе. :)

Пізно до вечірки, але я намагався зробити це в TypeScript і придумав таке:

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

Це друкує точну клавішу, натиснуту на екран. Тож якщо ви хочете відповісти на всі натискання "a", коли дів знаходиться у фокусі, ви порівняєте e.key з "a" - буквально, якщо (e.key === "a").

Є деякі проблеми, коли справа стосується події натискання клавіш. Стаття Яна Волтера про ключові події трохи стара, але добре пояснює, чому виявлення ключових подій може бути важким.

Кілька речей, які слід зазначити:

1. keyCode, which, charCodeМають різне значення / значення в KeyUp від натискання клавіші і KeyDown. Усі вони застарілі, однак підтримуються в основних браузерах.
2. Операційна система, фізичні клавіатури, браузери (версії) можуть впливати на код / ​​значення клавіш.
3. keyі codeє останнім стандартом. Однак браузери під час написання їх недостатньо підтримують.

Для вирішення подій клавіатури в реагуючих додатках я реалізував обробник реакцій-клавіатури-події . Будь ласка, подивіться.

ви можете перевірити цю функцію "pressEnter"