대응: 키보드 이벤트 핸들러 모든 '특수'

대응: 키보드 이벤트 핸들러 모든 '특수'

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);

Binary Muse는 IRC에 대한 답변을 제공했습니다.알고보니 이건 그냥 별난 짓이에요. 성질을 직접 읽을 수는 없어요.SyntheticKeyboardEvent-- 핸들러에서 속성을 지정해야 합니다.

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

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

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에서 문서화되어 있습니다.

Riccardo Galli가 올바르게 지적했듯이 로그 객체는 콘솔에서 액세스할 때 이미 가비지가 수집되어 있습니다.

제가 사용하는 솔루션은 개체의 클론을 로그로 기록하기만 하면 가비지 수집이 되지 않습니다.클로닝은 여러 가지 방법으로 할 수 있지만 lodash를 사용하기 때문에 다음과 같이 로그에 기록합니다.

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

또한 기본(원래) 브라우저 이벤트를 에서 추출할 수도 있습니다.Synthetic*Event를 경유하여 포장하다nativeEvent소유물.예.,

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

(에 대한 @Ricardo의 메모와 마찬가지로e.persist()React.js 소스 코드를 읽지 않고는 이 사실을 알 수 없습니다.)

언급URL : https://stackoverflow.com/questions/22123055/react-keyboard-event-handlers-all-null