反应:键盘事件处理程序全部为“空" [英] React: Keyboard Event Handlers All 'Null'

问题描述

我无法让任何 React SyntheticKeyboardEvent 处理程序为事件属性注册除 null 之外的任何内容.

我已经在一个小提琴中隔离了该组件，并且得到了与我的应用程序中相同的结果.谁能看出我做错了什么?

http://jsfiddle.net/kb3gN/1405/

var Hello = React.createClass({渲染:函数(){返回 (<div><p contentEditable="true"onKeyDown={this.handleKeyDown}onKeyUp={this.handleKeyUp}onKeyPress={this.handleKeyPress}>Foobar</p><文本区域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}/>

);},handleKeyDown:函数(e){控制台日志(e)；},handleKeyUp:函数(e){控制台日志(e)；},handleKeyPress:函数(e){控制台日志(e)；}});React.renderComponent(, document.body);

解决方案

BinaryMuse 在 IRC 上提供了答案.原来这只是一个怪癖；您不能直接从 SyntheticKeyboardEvent 读取属性——您需要从处理程序中指定属性:

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

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

I'm unable to get any of the React SyntheticKeyboardEvent handlers to register anything except null for the event properties.

I've isolated the component in a fiddle and am getting the same result as in my application. Can anyone see what I'm doing wrong?

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 provided the answer on IRC. Turns out it's just a quirk; you can't read the properties directly from SyntheticKeyboardEvent -- you need to specify the properties from the handler:

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

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

这篇关于反应:键盘事件处理程序全部为“空"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！