React鼠标多选功能的配置方法
更新时间：2021年05月20日 14:07:09 作者：smallbore
本文给大家分享React鼠标多选功能，通过导入组件直接包裹已经设计好的列表即可，操作简单方便,对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鼠标多选的资料请关注脚本之家其它相关文章！
相关文章
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了React如何以Hook的方式使用Echarts问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了React Hook Form 优雅处理表单使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了为什么说form元素是React的未来，本文会带你聊聊React围绕form的布局与发展，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
heatmap.js 是一个用于生成热力图的 JavaScript 库,React 是一个流行的 JavaScript 库,用于构建用户界面,本小编给大家介绍了在React 应用程序中使用heatmap.js实现热力图的绘制的示例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了React应用中使用Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
react拖拽组件react-sortable-hoc的使用
本文主要介绍了react拖拽组件react-sortable-hoc的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了详解react内联样式使用webpack将px转rem，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了axios请求响应数据加解密封装实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论