React: Обработчики событий клавиатуры Все "Null"

Я не могу получить никаких обработчиков React 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);

Ответ 1

BinaryMuse предоставил ответ на IRC. Оказывается, это просто причуда; вы не можете читать свойства непосредственно из SyntheticKeyboardEvent - вам нужно указать свойства из обработчика:

handleKeyUp: function(e) {
 console.log(e.type, e.which, e.timeStamp);
},

http://jsfiddle.net/BinaryMuse/B98Ar/

Ответ 2

console.log() является асинхронным и к тому времени, когда он обращается к событию React уже собрал мусор (он повторно использует событие по соображениям производительности).

Для целей отладки проще всего сказать, чтобы React отказался от этого события

e.persist() // NOTE: don't forget to remove it post debug
console.log(e)

Я не могу найти документацию по API, метод, по крайней мере, документирован в источниках https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155

Ответ 3

Как правильно указывает Риккардо Галли, объект журнала уже собирает мусор во время доступа к нему в консоли.

Решение, которое я использую, - это просто зарегистрировать клон объекта, поэтому он не будет собирать мусор. Клонирование можно сделать многими способами, но поскольку я использую lodash, я записываю так:

  handleKeyDown: function(e) {
      console.log(_.cloneDeep(e)));
    }

Ответ 4

Вы также можете извлечь основное (исходное) событие браузера из обертки Synthetic*Event с помощью свойства nativeEvent. Например.

handleKeyDown: function(e) {
  console.log('keyDown:event', e.nativeEvent);
},

(Как и в случае с примечанием @Riccardo о e.persist(), неясно, как вы должны это знать, не читая исходный код React.js.)