帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Select  选择  COM  鼠标  react  component  Items  
A compoent for react that allows mouse selection of child items

  • 源代码名称:react-selectable
  • 源代码网址:http://www.github.com/unclecheese/react-selectable
  • react-selectable源代码文档
  • react-selectable源代码下载
  • Git URL:
    git://www.github.com/unclecheese/react-selectable.git
  • Git Clone代码到本地:
    git clone http://www.github.com/unclecheese/react-selectable
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/unclecheese/react-selectable
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 可以选择的项目

    允许使用鼠标对项目进行单个或者组选择。

    演示

    试试它。

    从 0.1升级到 0.2

    0.2版本中发生了显著的变化。 请在这里阅读关于他们的文章。

    正在启动

    npm install react-selectable
    importReactfrom'react';import { render } from'react-dom';import { SelectableGroup, createSelectable } from'react-selectable';importSomeComponentfrom'./some-component';constSelectableComponent=createSelectable(SomeComponent);classAppextendsReact.Component {
     constructor (props) {
     super(props);
     this.state= {
     selectedKeys: []
     };
     }
     render () {
     return (
     <SelectableGroup onSelection={this.handleSelection}> {this.props.items.map((item, i) => {
     let selected =this.state.selectedKeys.indexOf(item.id) >-1;
     return (
     <SelectableComponent key={i} selected={selected} selectableKey={item.id}> {item.title}
     </SelectableComponent> );
     })}
     </SelectableGroup> );
     },
     handleSelection (selectedKeys) {
     this.setState({ selectedKeys });
     }
    }

    配置

    <SelectableGroup/> 组件接受几个可选的道具:

    • 在用户完成选择后激发的onSelection ( 函数) 回调
    • 当可选组组件中的单击发生,但不在可选项中时,onNonItemClick ( 函数) 回调被激发。 用于清除选定内容。
    • tolerance ( 号码) 要在 <SelectableGroup/> 容器周围添加的缓冲区数量,以像素为单位。
    • component ( 字符串) 要呈现的组件。 默认为 div
    • fixedPosition ( 布尔型) 是否为一个固定/绝对位置元素或者某一个的孙。 注意:如果你收到错误消息, Value must be omitted for boolean attributes 当你尝试 <SelectableGroup fixedPosition={true}/> 简单地使用javascript对象函数的布尔值: <SelectableGroup fixedPosition={Boolean(true)}/>
    • selectOnMouseMove ( 布尔型) 允许在鼠标移动时激发 onSelection 回调。 在 IE/edge中的性能被限制为 50ms
    • preventDefault ( 布尔型) 允许启用/禁用阻止 onmousedown 事件( e 。preventdefault )的默认操作。 true 默认情况下,如果应用程序需要捕获它的他功能,请禁用这里事件。
    • enabled ( 布尔型) 如果为 false,则禁用所有可选功能,并删除事件处理程序。

    装饰器

    尽管它们是可选的,但是你可以在这个 react-selectable 中使用 decorator 。

    并排比较是说明差异的最佳方法:

    没有装饰器的
    classSomeComponentextendsComponent {
    }exportdefaultcreateSelectable(SomeComponent)

    vs 。

    带装饰器的插件
    @createSelectableexportdefaultclassSomeComponentextendsComponent {
    }

    为了启用这个功能,你很可能需要安装插件( 根据你的构建设置) 。 Babel Babel,你需要确保已经安装并启用了 babel-plugin-transform-decorators-legacy插件,如下所示:

    • 运行 npm i --save-dev babel-plugin-transform-decorators-legacy
    • 将以下行添加到 .babelrc:
    {
     "plugins": ["transform-decorators-legacy"]
    }


    文章标签:COM  react  component  Select  选择  鼠标  Items  

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