我无法让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);

推荐答案

BinaryMuse在IRC上提供了答案.原来这只是个怪癖;无法直接从SyntheticKeyboardEvent读取属性--需要从处理程序中指定属性:

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

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

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

阻止在ShadCN和React中的FormLabel中添加 colored颜色

从app.js导航,这是在BrowserRouter包装之外

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态,而不是呈现?<>

获取未捕获的错误:Gatsby生产版本上的最小化react 错误#418

MUI 日期 Select 器 - 最小日期混乱

如何使用 React 获取表单中的所有值?

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

如何在react 中过滤数组的数组?

react :输入失go 焦点,输入一个字符,

未捕获的运行时错误:对象作为 React 子项无效

将外部 JavaScript 导入 React(通过文件)

如何处理页面加载时发生的 reactjs 错误?

DatePicker MUI 如何在日历左侧显示清除文本

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

使用 React 中的功能组件更改另一个组件的状态

如何跨微前端 React 应用管理状态管理?

为什么我在运行一些 npm react 命令时会收到这些警告?

axios post方法中的请求失败,状态码为500错误