React鼠標多選功能的配置方法

更新時間：2021年05月20日 14:07:09 作者：smallbore

本文給大家分享React鼠標多選功能，通過導入組件直接包裹已經(jīng)設計好的列表即可，操作簡單方便,對React鼠標多選相關知識感興趣的朋友一起看看吧

一般列表都有選擇功能，單選復選多選都很常見。在自定義循環(huán)的列表，圖像中，實現(xiàn)鼠標單選，多選，反選功能。

# React mousemultiples
# React 鼠標多選組件

React 鼠標多選組件

局限性

> 主要實現(xiàn)鼠標多選的效果, 在不破壞原有的列表情況下，嵌入組件擁有鼠標多選功能。

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

安裝

npm i mousemultiples

使用配置項

/**
 * wrapperScroll?: any, // 滾動單位'ID';
 * 
 * itemClass: string,  // 列表框通用攜帶 class
 * 
 * activeClass?: string, // 列表框 選中class
 * 
 * isDataChange: any,  // 渲染的數(shù)組，檢測數(shù)據(jù)更改
 * 
 * activePosition?: any,  // 主動選中數(shù)據(jù)
 * 
 * onSelected: (pos: any, item: any, data: any) => void, // 拖動
 * 
 * onSingleSelected?: (pos: any, item: any, data: any) => void, // 單擊
 * 
 * 注：itemClass 與 children 循環(huán)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 自定義設計，樣式，格子，選中效果等.

> 導入組件直接包裹已經(jīng)設計好的列表即可，確保className和itemClass一致，確保導入data-position，和activeClass是否存在高亮樣式。。。

以上就是React鼠標多選功能的詳細內(nèi)容，更多關于React鼠標多選的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

教你應用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個糟糕的代碼示例開始，應用 SOLID 的第一個原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責任的 React 組件，需要的朋友可以參考下
2022-07-07
React版本18.xx降低為17.xx的方法實現(xiàn)
由于現(xiàn)在react默認創(chuàng)建是18.xx版本,但是我們現(xiàn)在大多使用的還是17.xx或者更低的版本,于是要對react版本進行降級,本文主要介紹了React版本18.xx降低為17.xx的方法實現(xiàn),感興趣的可以了解一下
2023-11-11
react?umi?刷新或關閉瀏覽器時清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關閉瀏覽器時清除localStorage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
react-router-dom之異步加載路由方式
這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題
這篇文章主要介紹了React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
在React中應用SOLID原則的方法
SOLID?是一套原則，它們主要是關心代碼質(zhì)量和可維護性的軟件專業(yè)人員的指導方針，本文給大家分享如何在React中應用SOLID原則，感興趣的朋友一起看看吧
2022-07-07
React使用refs操作DOM方法詳解
React核心就在于虛擬DOM，也就是在React中不總是直接操作頁面真實的DOM元素，并且結合Diffing算法，可以做到最小化頁面重繪，有些時候不可避免的我們需要一種方法可以操作我們定義的元素標簽，并作出對應的修改。在React中提供了一種訪問DOM節(jié)點的方式，也就是這里的refs
2022-11-11
React.cloneElement的使用詳解
這篇文章主要介紹了React.cloneElement的使用詳解，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下
2021-04-04
React中的Hooks進階理解教程
這篇文章主要介紹了React中的Hooks進階理解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
React報錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12