Как обработать событие onKeyPress в ReactJS?


215

Как я могу заставить 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);

15
Начиная с v0.11 React нормализует коды клавиш в удобочитаемые строки. Я бы предложил использовать их вместо кодов клавиш.
Рэнди Моррис

Реакция @RandyMorris не всегда правильно нормализует коды клавиш. Для получения «+» вы получите кодовое значение ключа 187 с shiftKey = true, однако значение «key» преобразуется в «Неопознанный».
Герр

Ответы:


226

Я работаю с 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>
     );
}

18
и вы можете симулировать его в тестах с:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
sylvain

2
Что вы подразумеваете под экспериментом? Я думал с ES6 "functionName (param) => {}" будет работать?
Вальтари

4
@Waltari Это функция стрелки ES6 , что означаетfunction handleKeyPress(event){...}
Haven

2
Это также связываетthis
bhathiya-perera

4
Возможно, это педантично, но стоит отметить, что было бы предпочтительнее использовать строгую ===проверку на равенство event.key == 'Enter'.
Александр Нид

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

onKeyDownобнаруживает keyCodeсобытия.


11
Обычно вещь как ключ ввода обнаруживается через onKeyUp - это позволяет пользователю остановить взаимодействие, если он решит. использование keyPress или keyDown выполняется немедленно.
Андреас

53

Для меня всегда , но имеет правильное значение. Если используется правильный код в .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>
      );
    }
  });

Реагировать на события клавиатуры .


9
... так что если вы заинтересованы в использовании клавиш со стрелками и / или других не алфавитно-цифровых клавиш, onKeyDown для вас, так как они не будут возвращать keyChar, а keyCode.
oskare

3
Для тех, кто заинтересован в том, чтобы попробовать сами React keyEvents, вот код и ящик, который я создал.
AlienKevin

13

Событие нажатия клавиш устарело. Вместо него следует использовать событие 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} /> 
}

1
Это также поддерживает event.key === 'Enter'. Посмотрите здесь .
Марселокра

10

React не передает вам события, о которых вы могли подумать. Скорее, это прохождение синтетических событий .

В кратком тесте event.keyCode == 0всегда верно. Что вы хотитеevent.charCode


Это не влияет на вопрос, хотя. Он не меняет код клавиши, равный 13 при нажатии Enter.
Текиламан

1
я просто продолжаю получать синтетические функции обратноe.key || e.keyCode || e.charCode
chovy

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

9

Если вы хотите передать динамический параметр в функцию внутри динамического ввода:

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

Надеюсь, это кому-нибудь поможет. :)


7

Поздно к вечеринке, но я пытался сделать это в TypeScript и придумал это:

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

Это печатает точную клавишу, нажатую на экран. Поэтому, если вы хотите реагировать на все нажатия «a», когда div находится в фокусе, вы бы сравнили e.key с «a» - буквально if (e.key === «a»).


Это не похоже на работу. stackoverflow.com/questions/43503964/…
sdfsdf

5

Есть некоторые проблемы, когда дело доходит до нажатия клавиши. Статья Яна Вольтера о ключевых событиях немного устарела, но хорошо объясняет, почему обнаружение ключевых событий может быть трудным.

Несколько вещей, на которые стоит обратить внимание:

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

Чтобы заняться событиями клавиатуры в приложениях реагирования, я реализовал обработчик реакции-клавиатуры-события . Пожалуйста, посмотрите.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.