Как я могу заставить 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);
javascript
reactjs
keypress
onkeypress
user544079
источник
источник
Ответы:
Я работаю с React 0.14.7, использую
onKeyPress
иevent.key
хорошо работает.источник
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
проверку на равенствоevent.key == 'Enter'
.onKeyDown
обнаруживаетkeyCode
события.источник
Для меня всегда , но имеет правильное значение. Если используется правильный код в .
onKeyPress
e.keyCode
0
e.charCode
onKeyDown
e.charCode
Реагировать на события клавиатуры .
источник
Событие нажатия клавиш устарело. Вместо него следует использовать событие Keydown.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
источник
event.key === 'Enter'
. Посмотрите здесь .React не передает вам события, о которых вы могли подумать. Скорее, это прохождение синтетических событий .
В кратком тесте
event.keyCode == 0
всегда верно. Что вы хотитеevent.charCode
источник
e.key || e.keyCode || e.charCode
источник
Если вы хотите передать динамический параметр в функцию внутри динамического ввода:
Надеюсь, это кому-нибудь поможет. :)
источник
Поздно к вечеринке, но я пытался сделать это в TypeScript и придумал это:
Это печатает точную клавишу, нажатую на экран. Поэтому, если вы хотите реагировать на все нажатия «a», когда div находится в фокусе, вы бы сравнили e.key с «a» - буквально if (e.key === «a»).
источник
Есть некоторые проблемы, когда дело доходит до нажатия клавиши. Статья Яна Вольтера о ключевых событиях немного устарела, но хорошо объясняет, почему обнаружение ключевых событий может быть трудным.
Несколько вещей, на которые стоит обратить внимание:
keyCode
,which
,charCode
Имеют разное значение / значение в KeyUp от нажатия клавиши и KeyDown. Все они устарели, однако поддерживаются в основных браузерах.key
иcode
последние стандарты. Однако они не очень хорошо поддерживаются браузерами на момент написания статьи.Чтобы заняться событиями клавиатуры в приложениях реагирования, я реализовал обработчик реакции-клавиатуры-события . Пожалуйста, посмотрите.
источник
Вы можете проверить эту функцию "pressEnter"
источник