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);
54
javascript react-jsx reactjs

4 ответов

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

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

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

62

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

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

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

вы также можете извлечь базовое (исходное) событие браузера из Synthetic*Event фантик через nativeEvent собственность. Е. Г.,

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

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

1