React：鍵盤事件處理程序全部'空'

Question

我無法獲取任何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);

Answer 1

BinaryMuse在IRC上提供了答案。 事實證明這只是一個怪癖; 您無法直接從SyntheticKeyboardEvent讀取屬性 - 您需要從處理程序指定屬性：

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

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

Answer 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

Answer 3

正如Riccardo Galli指出的那樣，日志對象在您在控制台中訪問它時已經被垃圾收集了。

我使用的解決方案是只記錄對象的克隆，因此不會進行垃圾回收。 克隆可以通過很多方式完成，但由於我使用lodash，我會像這樣記錄：

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

Answer 4

您還可以通過nativeEvent屬性從Synthetic*Event包裝器中提取基礎（原始）瀏覽器事件。 例如，

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

（就像@ Riccardo關於e.persist()的說明e.persist() ，如果不閱讀React.js源代碼，你不清楚如何知道這一點。）