小编典典

反应:键盘事件处理程序全为“ Null”

reactjs

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

阅读 267

收藏
2020-07-22

共1个答案

小编典典

BinaryMuse在IRC上提供了答案。事实证明,这只是一个怪癖。您不能直接从中读取属性SyntheticKeyboardEvent-您需要从处理程序中指定属性:

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

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

2020-07-22