React鼠標(biāo)多選功能的配置方法

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

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

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

# React mousemultiples
# React 鼠標(biāo)多選組件

React 鼠標(biāo)多選組件

局限性

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

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導(dǎo)出選中的唯一識別
 * 注：帶問號為可選項，否則都是必填項。
 */

> 操作說明：
> 鼠標(biāo)點擊，單選
> Ctrl + 鼠標(biāo)點擊，多選，復(fù)選，反選
> Ctrl + a 全選
> 鼠標(biāo)拖動，范圍多選

示例：

<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 自定義設(shè)計，樣式，格子，選中效果等.

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

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

您可能感興趣的文章:

相關(guān)文章

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