React鼠標(biāo)多選功能的配置方法
一般列表都有選擇功能，單選復(fù)選多選都很常見(jiàn)。在自定義循環(huán)的列表，圖像中，實(shí)現(xiàn)鼠標(biāo)單選，多選，反選功能。
# React mousemultiples
# React 鼠標(biāo)多選組件
React 鼠標(biāo)多選組件
局限性
> 主要實(shí)現(xiàn)鼠標(biāo)多選的效果, 在不破壞原有的列表情況下，嵌入組件擁有鼠標(biāo)多選功能。
npm包地址 [鏈接](https://www.npmjs.com/package/mousemultiples)
安裝
npm i mousemultiples
使用配置項(xiàng)
/** * wrapperScroll?: any, // 滾動(dòng)單位'ID'; * * itemClass: string, // 列表框通用攜帶 class * * activeClass?: string, // 列表框 選中class * * isDataChange: any, // 渲染的數(shù)組，檢測(cè)數(shù)據(jù)更改 * * activePosition?: any, // 主動(dòng)選中數(shù)據(jù) * * onSelected: (pos: any, item: any, data: any) => void, // 拖動(dòng) * * onSingleSelected?: (pos: any, item: any, data: any) => void, // 單擊 * * 注：itemClass 與 children 循環(huán)box className必須攜帶一致，同box必須綁定data-position，data-position導(dǎo)出選中的唯一識(shí)別 * 注：帶問(wèn)號(hào)為可選項(xiàng)，否則都是必填項(xiàng)。 */
> 操作說(shuō)明：
> 鼠標(biāo)點(diǎn)擊，單選
> Ctrl + 鼠標(biāo)點(diǎn)擊，多選，復(fù)選，反選
> Ctrl + a 全選
> 鼠標(biāo)拖動(dòng)，范圍多選
示例：
<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>
> 說(shuō)明：
> children 自定義設(shè)計(jì)，樣式，格子，選中效果等.
> 導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可，確保className和itemClass一致，確保導(dǎo)入data-position，和activeClass是否存在高亮樣式。。。
以上就是React鼠標(biāo)多選功能的詳細(xì)內(nèi)容，更多關(guān)于React鼠標(biāo)多選的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react render的原理及觸發(fā)時(shí)機(jī)說(shuō)明
這篇文章主要介紹了react render的原理及觸發(fā)時(shí)機(jī)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
關(guān)于react-router-dom路由入門教程
這篇文章主要介紹了關(guān)于react-router-dom路由入門教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的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中完整實(shí)例講解Recoil狀態(tài)管理庫(kù)的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫(kù)的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個(gè)可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實(shí)現(xiàn)的過(guò)程中，因?yàn)楝F(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對(duì)Recoil感興趣可以參考下文2023-05-05
React實(shí)現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實(shí)現(xiàn)單向數(shù)據(jù)流的方法2023-04-04
react hook使用useState更新數(shù)組,無(wú)法更新問(wèn)題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無(wú)法更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React如何接收excel文件下載導(dǎo)出功能封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React18的新特性startTransition主要是為了優(yōu)化用戶體驗(yàn),通過(guò)標(biāo)記低優(yōu)先級(jí)的更新任務(wù),如頁(yè)面重渲染,使它們不會(huì)阻塞高優(yōu)先級(jí)的緊急任務(wù)如用戶輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01