酷徒LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Keydown  WRAP  组件  component  COM  换行  Light  react  
Lightweight keydown wrapper for React components

  • 源代码名称:react-keydown
  • 源代码网址:http://www.github.com/glortho/react-keydown
  • react-keydown源代码文档
  • react-keydown源代码下载
  • Git URL:
    git://www.github.com/glortho/react-keydown.git
  • Git Clone代码到本地:
    git clone http://www.github.com/glortho/react-keydown
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/glortho/react-keydown
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • npm versiondependencies

    用户作为高级组件或者decorator将keydown事件传递给包装的组件,或者直接通过指定的键调用方法。 用于实现键盘导航或者其他快捷键。

    主要优点:

    • 声明式语法:组件表示它们将对哪些键做出响应。
    • 直观的DX: 修饰类或者方法以将它的绑定到指定键。
    • 范围: 通过装饰/环绕组件指定绑定的范围。 只有这些组件及它的子组件将接收指定的关键事件,然后只有当它们显示为活动的时候。
    • 修改键: 标准修改键组合支持。
    • 轻量级: 2kb 压缩和压缩,并且只将单个keydown侦听器附加到文档,无论你指定了多少键绑定。
    • 跨浏览器: 在除 IE 8和更高版本之外的所有浏览器中工作。

    查阅 API-&参考文档,或者继续阅读下面的内容以快速开始。

    注意 : Reactkeydown不使用 decorator,而是使用应用程序中的Pattern,你需要像Babel和decorator变换插件这样的一个 transpiler:https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

    安装

    
    npm install --save react-keydown
    
    
    
    

    使用

    react的默认构建使用CommonJS的MODULE 系统。 对于AMD或者其他支持,请使用 umd专用分支

    方法:使用应触发方法的键装饰

    importReactfrom'react';importkeydownfrom'react-keydown';classMyComponentextendsReact.Component {
     @keydown( 'enter' ) // or specify `which` code directly, in this case 13submit( event ) {
     // do something, or not, with the keydown event, maybe event.preventDefault()MyApi.post( this.state );
     }
    }

    注意:由于对于keydown事件的惟一上下文是组件,修饰的方法接收事件作为它的惟一参数,而组件实例作为上下文接收事件。

    指定多个键应触发方法
    importkeydown, { Keys } from'react-keydown';const { ENTER, TAB } = Keys; // optionally get key codes from Keys lib to check against later@keydown( ENTER, TAB, 'ctrl+z' ) // could also be an arrayautocomplete( event ) {
     if ( event.which===ENTER ) { ... }
     MyApi.get( this.state );
    }

    类:将keydown事件传递到你的组件

    @keydownclassMyComponentextendsReact.Component {
     componentWillReceiveProps( { keydown } ) {
     if ( keydown.event ) {
     // inspect the keydown event and decide what to doconsole.log( keydown.event.which );
     }
     }
     render() {
     return (
     <div>keydown events will only get passed down after thisDOM node mounts or is clicked on</div> );
     }
    }exportdefaultMyComponent;
    只监视你关心的密钥代码 which:
    constKEYS= [ 'shift+up', 'shift+down', 'enter', 'j', 'k', 'h', 'l' ];
    @keydown( KEYS )classMyComponentextendsReact.Component {
     ...}
    使用 @keydownScoped 快捷方式

    当使用类修饰/高阶组件时,使用 @keydownScoped 装饰方法以标识 keydown.event prop,并将某些值绑定到方法:

    importkeydown, { keydownScoped } from'react-keydown';
    @keydown( 'enter' ) // optional to specify a key here. if called with just @keydown, all key events will get passed downclassMyComponentextendsReact.Component {
     render() {
     return<MyOtherComponent {...this.props} />;
     }
    }classMyOtherComponentextendsReact.Component {
     ... @keydownScoped( 'enter' ) // inspects nextProps.keydown.event in componentWillReceiveProps behind the scenessubmit() {
     // submit }
    }

    这是一种方便的方法,但也允许你指定一个更大的视图上下文,该上下文。 有时声明绑定的组件在它的自身的位置太小。

    这也可以是设置应用程序宽快捷方式的好方法。 用 @keydown 包装 root 组件,然后使用 @keydownScoped 或者手动检查这些绑定中的子组件中的keydown.event 道具。

    处理所有密钥

    在某些情况下,你可能需要处理自己的所有键。 为此,你可以指定以下内容:

    
    import keydown, { ALL_KEYS } from 'react-keydown'
    
    
    
    @keydown( ALL_KEYS )
    
    
    handleKeys(ev) {
    
    
    //handle keys here
    
    
    }
    
    
    
    

    处理所有可以打印密钥

    另一个有用的特性是处理所有可以打印字符。

    
    import keydown, { ALL_PRINTABLE_KEYS } from 'react-keydown'
    
    
    
    @keydown( ALL_PRINTABLE_KEYS )
    
    
    beginEdit(ev) {
    
    
    //Start editing
    
    
    }
    
    
    
    

    警告:输入,textarea和选择元素

    默认情况下,当这些字段具有焦点时,绑定将不会工作,以便不干扰与这些控件相关的用户输入。 可以通过两种方式重写这里方法:

    为快捷键指定 ctrl 修饰符。

    从v1.6.0年开始,有实验支持向元素添加 onKeyDown 绑定,并指定将 @keydown 修饰为的方法。 例如:

    classMyClassextendsReact.Component {
     @keydown( 'a' )
     myMethod( event ) {
     console.log( event ); // should log only on 'a' keystroke, whether input is focused or not }
     render() {
     return<input onKeyDown={ this.myMethod } />;
     }
    }

    在第二种情况下,你可以通过扩展来使多个输入工作 { onKeyDown: this.myMethod } 进入他们,或者使用这个可以重用的输入组件作为一个支持方法( 或者组合作为道具传递的多种方法)。

    演示

    转到现场演示,或者:

    
    $ open example/public/index.html
    
    
    
    

    请注意,这是一个正在进行中的工作 !

    测试

     
    $ npm test
    
    
    
     

    Notes,免责声明和提示

    • 装饰器 Pattern @keydown 目前需要由Babel遗留装饰器转换或者等效的。
    • 的组件响应 16 fragment 时,点击时可能无法正确激活它们的。 有关详细信息,请参见
    • 默认的构建输出CommonJS模块和本机ES模块。 对于AMD或者其他支持,请使用 umd专用分支
    • 这个库只使用ES2015类和类方法进行了测试。 某些方法修饰功能可以用于其他类型的对象方法。
    • 在同一时间安装的组件的重复键绑定不会同时触发。 最近挂载的组件,或者最近被点击或者点击的那个组件将获得胜利。 如果确实要激发,用 @keydown(.. . ) 装饰一个公共的祖先类,然后在子组件的( 或者在两种情况下检查 nextProps.keydown.event ) 中使用 @keydownScoped(.. . )
    • 因为对于keydown事件我们惟一的上下文是组件,修饰的方法接收事件作为它的惟一参数,而组件实例作为上下文接收事件。
    • 为了尽可能无缝和高效地工作,方法修饰器包装了响应生命周期方法。 类decorator不执行这里操作,而是将它的作为更高的顺序组件运行。

    问题

    为什么这么有限,只能在 keydown 和?

    我是根据我对项目的特殊需求发表的。 如果有其他人到这里,需要别的东西,通过问题或者请求请求让我知道。



    文章标签:COM  WRAP  Light  换行  react  component  KEY  组件  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷