React: Обработчики Событий Клавиатуры Все "Null"
Я не могу получить какой-либо реакции SyntheticKeyboardEvent
обработчики для регистрации чего-либо, кроме null
для свойств событий.
я изолировал компонент в скрипке и получаю тот же результат, что и в моем приложении. Кто-нибудь видит, что я делаю не так?
http://jsfiddle.net/kb3gN/1405/
var Hello = React.createClass({
render: function() {
return (
<div>
<p contentEditable="true"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>Foobar</p>
<textarea
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>
</textarea>
<div>
<input type="text" name="foo"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress} />
</div>
</div>
);
},
handleKeyDown: function(e) {
console.log(e);
},
handleKeyUp: function(e) {
console.log(e);
},
handleKeyPress: function(e) {
console.log(e);
}
});
React.renderComponent(<Hello />, document.body);
4 ответов
BinaryMuse предоставил ответ на IRC. Оказывается, это просто причуда; вы не можете читать свойства непосредственно из SyntheticKeyboardEvent
-- необходимо указать свойства из обработчика:
handleKeyUp: function(e) {
console.log(e.type, e.which, e.timeStamp);
},
Как правильно указывает Риккардо Галли, объект log уже является мусором, собранным во время доступа к нему в консоли.
решение, которое я использую, состоит в том, чтобы просто зарегистрировать клон объекта, поэтому он не будет собирать мусор. Клонирование можно сделать многими способами, но так как я использую lodash, я регистрирую так:
handleKeyDown: function(e) {
console.log(_.cloneDeep(e)));
}
вы также можете извлечь базовое (исходное) событие браузера из Synthetic*Event
фантик через nativeEvent
собственность. Е. Г.,
handleKeyDown: function(e) {
console.log('keyDown:event', e.nativeEvent);
},
(так же, как с заметкой @Riccardo о e.persist()
, неясно, как вы должны это знать, не читая React.исходный код JS.)