脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React鼠标多选

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鼠标多选的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 教你应用 SOLID 原则整理 React 代码之单一原则

    教你应用 SOLID 原则整理 React 代码之单一原则

    这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下
    2022-07-07
  • React版本18.xx降低为17.xx的方法实现

    React版本18.xx降低为17.xx的方法实现

    由于现在react默认创建是18.xx版本,但是我们现在大多使用的还是17.xx或者更低的版本,于是要对react版本进行降级,本文主要介绍了React版本18.xx降低为17.xx的方法实现,感兴趣的可以了解一下
    2023-11-11
  • react umi 刷新或关闭浏览器时清除localStorage方式

    react umi 刷新或关闭浏览器时清除localStorage方式

    这篇文章主要介绍了react umi 刷新或关闭浏览器时清除localStorage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react-router-dom之异步加载路由方式

    react-router-dom之异步加载路由方式

    这篇文章主要介绍了react-router-dom之异步加载路由方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • React父组件数据实时更新了,子组件没有更新的问题

    React父组件数据实时更新了,子组件没有更新的问题

    这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 在React中应用SOLID原则的方法

    在React中应用SOLID原则的方法

    SOLID 是一套原则，它们主要是关心代码质量和可维护性的软件专业人员的指导方针，本文给大家分享如何在React中应用SOLID原则，感兴趣的朋友一起看看吧
    2022-07-07
  • React使用refs操作DOM方法详解

    React使用refs操作DOM方法详解

    React核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘，有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs
    2022-11-11
  • React.cloneElement的使用详解

    React.cloneElement的使用详解

    这篇文章主要介绍了React.cloneElement的使用详解，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04
  • React中的Hooks进阶理解教程

    React中的Hooks进阶理解教程

    这篇文章主要介绍了React中的Hooks进阶理解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React报错Type '() => JSX.Element[]&apos

    这篇文章主要为大家介绍了React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12

最新评论