web-dev-qa-db-ja.com

React：キーボードイベントハンドラーはすべて「Null」

イベントプロパティに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);
javascriptreactjsreact-jsx
54
cantera

BinaryMuse IRCに関する回答を提供しました。それは単なる奇妙なものであることが判明しました。 SyntheticKeyboardEventからプロパティを直接読み取ることはできません-ハンドラからプロパティを指定する必要があります。

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

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

62
cantera

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

24
Riccardo Galli

Riccardo Galliが正しく指摘しているように、ログオブジェクトはコンソールでアクセスした時点で既にガベージコレクションされています。

私が使用する解決策は、オブジェクトのクローンをログに記録するだけなので、ガベージコレクションされません。クローニングはさまざまな方法で実行できますが、私はlodashを使用しているため、次のようにログを記録します。

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

nativeEventプロパティを介して、_Synthetic*Event_ラッパーから、基礎となる（元の）ブラウザーイベントを抽出することもできます。例えば。、

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

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

1
chbrown