React鼠标多选功能的配置方法
短信预约 -IT技能 免费直播动态提醒
一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。
# React mousemultiples
# React 鼠标多选组件
React 鼠标多选组件
局限性
> 主要实现鼠标多选的效果, 在不破坏原有的列表情况下，嵌入组件拥有鼠标多选功能。
npm包地址 [链接](https://www.npmjs.com/package/mousemultiples)
安装
npm i mousemultiples
使用配置项
> 操作说明：
> 鼠标点击，单选
> 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 class="lazy" data-src={ item.FileUrl } /></div>
</div>
)
})}
</MouseMultiples>> 说明：
> children 自定义设计，样式，格子，选中效果等.
> 导入组件直接包裹已经设计好的列表即可，确保className和itemClass一致，确保导入data-position，和activeClass是否存在高亮样式。。。
以上就是React鼠标多选功能的详细内容，更多关于React鼠标多选的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
