54

イベント プロパティSyntheticKeyboardEvent以外を登録するための React ハンドラを取得できません。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

4 に答える 4

25

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

于 2015-04-15T22:28:18.800 に答える
1

Synthetic*Eventプロパティを使用して、ラッパーから基になる (元の) ブラウザー イベントを抽出することもできnativeEventます。例えば、

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

(@Riccardo のメモと同様にe.persist()、React.js ソース コードを読まずにこれを知る方法は不明です。)

于 2016-01-16T03:53:07.087 に答える