React鼠標(biāo)多選功能的配置方法
一般列表都有選擇功能，單選復(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)多選功能的詳細(xì)內(nèi)容，更多關(guān)于React鼠標(biāo)多選的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react render的原理及觸發(fā)時機(jī)說明
這篇文章主要介紹了react render的原理及觸發(fā)時機(jī)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于react-router-dom路由入門教程
這篇文章主要介紹了關(guān)于react-router-dom路由入門教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時，默認(rèn)情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender2022-10-10
本文主要介紹了react導(dǎo)出excel文件的四種方式,主要包括原生js導(dǎo)出,使用?js-export-excel,使用xlsx導(dǎo)出, 使用react-html-table-to-excel,感興趣的可以了解一下2023-11-11
React中完整實例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實現(xiàn)的過程中，因為現(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對Recoil感興趣可以參考下文2023-05-05
React實現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實現(xiàn)單向數(shù)據(jù)流的方法2023-04-04
react hook使用useState更新數(shù)組,無法更新問題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React如何接收excel文件下載導(dǎo)出功能封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React18的新特性startTransition主要是為了優(yōu)化用戶體驗,通過標(biāo)記低優(yōu)先級的更新任務(wù),如頁面重渲染,使它們不會阻塞高優(yōu)先級的緊急任務(wù)如用戶輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01