React : 키보드 이벤트 핸들러 모두 'Null'

React : 키보드 이벤트 핸들러 모두 'Null'

---

이벤트 속성을 SyntheticKeyboardEvent제외하고 null는 아무것도 등록하기 위해 React 핸들러 를 가져올 수 없습니다 .

바이올린에서 구성 요소를 분리했으며 응용 프로그램에서와 동일한 결과를 얻고 있습니다. 아무도 내가 뭘 잘못하고 있는지 볼 수 있습니까?

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

---

BinaryMuse 는 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)

I can't find an API documentation, the method is at least documented in the sources https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155

---

As Riccardo Galli points out correctly, the log object is already garbage collected at the time you access it in the console.

The solution I use is to just log a clone of the object, so it won't be garbage collected. Cloning can be done in a lot of ways, but since I use lodash, I log like this :

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

---

You can also extract the underlying (original) browser event from the Synthetic*Event wrapper via the nativeEvent property. E.g.,

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

(Just as with @Riccardo's note about e.persist(), it's unclear how you're supposed to know this without reading the React.js source code.)

ReferenceURL : https://stackoverflow.com/questions/22123055/react-keyboard-event-handlers-all-null