React鼠标多选功能的配置方法

一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。

# React mousemultiples
# React 鼠标多选组件

React 鼠标多选组件

局限性

> 主要实现鼠标多选的效果, 在不破坏原有的列表情况下，嵌入组件拥有鼠标多选功能。

npm包地址 [链接](https://www.npmjs.com/package/mousemultiples)

安装

npm i mousemultiples

使用配置项

/**
 * wrapperScroll?: any, // 滚动单位'ID';
 * 
 * itemClass: string,  // 列表框通用携带 class
 * 
 * activeClass?: string, // 列表框 选中class
 * 
 * isDataChange: any,  // 渲染的数组，检测数据更改
 * 
 * activePosition?: any,  // 主动选中数据
 * 
 * onSelected: (pos: any, item: any, data: any) => void, // 拖动
 * 
 * onSingleSelected?: (pos: any, item: any, data: any) => void, // 单击
 * 
 * 注：itemClass 与 children 循环box className必须携带一致，同box必须绑定data-position，data-position导出选中的唯一识别
 * 注：带问号为可选项，否则都是必填项。
 */

> 操作说明：
> 鼠标点击，单选
> Ctrl + 鼠标点击，多选，复选，反选
> Ctrl + a 全选
> 鼠标拖动，范围多选

示例：

<MouseMultiples
    wrapperScroll="classify-img_body"
    itemClass='selection_box'
    activeClass='selection_box-active'
    activePosition={activePosition}
    onSelected={selected}
    isDataChange={imageLists}
    {imageLists.map(item => {
        return (
            <div
            className="selection_box"
            data-position={item.FileId}
            >
                <div className="listImage"><img src={ item.FileUrl } /></div>
            </div>
        )
    })}
</MouseMultiples>

> 说明：

> children 自定义设计，样式，格子，选中效果等.

> 导入组件直接包裹已经设计好的列表即可，确保className和itemClass一致，确保导入data-position，和activeClass是否存在高亮样式。。。

以上就是React鼠标多选功能的详细内容，更多关于React鼠标多选的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS中使用react-tooltip插件实现鼠标悬浮显示框

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https://www.npmjs.com/package/react-tooltip 1, 首先在配置文件加上引用 2, 然后在页面内引入: 3, react-tooltip的使用非常方便, 在需要鼠标悬停显示的标签上加上data-tip和data-html属性 比如我希望鼠标悬停在某个图标时展示提示框,代码如下: data-ti

  • ReactJS实现表单的单选多选和反选的示例

    本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助. 需求是对列表实现单选,反选和多选,全部清除的操作 ...... this.state = { //初始化空数组,表示已经选择的 selectedStores:[], } ...... handleClick(e){ const newSelection = e.target.value;//拿到点击的具体一项 let newSelectionArray;//新建一个空数组 //判断点击项是否为选择状态,是的

  • React鼠标多选功能的配置方法

    一般列表都有选择功能,单选复选多选都很常见.在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能. # React mousemultiples # React 鼠标多选组件 React 鼠标多选组件 局限性 > 主要实现鼠标多选的效果, 在不破坏原有的列表情况下,嵌入组件拥有鼠标多选功能. npm包地址 [链接](https://www.npmjs.com/package/mousemultiples) 安装 npm i mousemultiples 使用配置项 /**  * wrappe

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • react.js CMS 删除功能的实现方法

    react.js CMS 删除功能的实现方法

    页面效果图: 数据操作分析: 在查询表组件的  TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组.formatPostCollectionList为action中的方法,需要export 定义每一行的实体为一个数组,用变量 postCollections 表示 如果选中当前行,则更新实体数组中的数据:如果取消当前行

  • React实现全选功能

    本文实例为大家分享了React实现全选功能的具体代码,供大家参考,具体内容如下 1.主要就是使用state状态管理 2.jsx写的时候要多留心,return 的时候最好用一个()包着元素部分,不然有可能编译不过. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten

  • S6500系列交换机NAT功能的配置方法

    S6500系列交换机NAT功能的配置方法

    组网需求:1) 某公司的一个内部网络在Quidway S3528的连接下,要求通过Quidway S6506R的地址转换功能连接到广域网,访问Internet:2) 内部网络VLAN2中两台PC的私有地址为192.168.1.2和192.168.1.3:3) 在S6506R中,实现NAT功能的业务处理板插在第七槽位:4) NAT地址池里有200.18.2.3-200.18.2.5三个合法的公网IP地址:5) VLAN10接口的IP地址为200.18.2.2,子网掩码为255.255.255.25

  • .net开发中批量删除记录时实现全选功能的具体方法

    1 . JS实现全选 往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码 复制代码 代码如下: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"    DataSourceID="SqlD

  • linux(centos5.5)/windows下nginx开启phpinfo模式功能的配置方法分享

    经过志文工作室测试有效的相关配置主要内容如下: 复制代码 代码如下: location ~ \.php(.*)$ { fastcgi_pass   unix:/tmp/php-cgi.sock; fastcgi_index  index.php; fastcgi_split_path_info ^(.+\.php)(.*)$; fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param   P

  • C# 鼠标穿透窗体功能的实现方法

    同样该功能需要加载命名空间 using System.Runtime.InteropServices; 复制代码 代码如下: private const uint WS_EX_LAYERED = 0x80000;        private const int WS_EX_TRANSPARENT = 0x20;        private const int GWL_STYLE = (-16);        private const int GWL_EXSTYLE = (-20);   

  • Tomcat7中开启gzip压缩功能的配置方法

    使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度来看,还是有必要开启gzip压缩的. 对于tomcat7服务器,打开conf文件夹下的server.xml 文件,找到 复制代码 代码如下: <Connector port="8080" protocol="HTTP/1.1"                   

  • 使用原生js编写一个简单的框选功能方法

    使用原生js编写一个简单的框选功能方法

    今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述 鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码 怎么实现 二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了

随机推荐