一般列表都有選擇功能，單選複選多選都很常見。http://www.cppcns.com在自定義迴圈的列表，影象中，實現滑鼠單選，多選，反選功能。

# 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, www.cppcns.com
 
;//渲染的陣列，檢測資料更改
*
*activePosition?:any,//主動選中資料
*
*onSelected:(pos:any,item:any,data:any)=>&nncFMkyibsp;void,//拖動
*
*onSingleSelected?:(pos:any,data:any)=>void,//單擊
*
*注：itemClass與children迴圈boxclassName必須攜帶一致，同box必須繫結data-position，data-position匯出選中的唯一識別
*注：帶問號為可選項，否則都是必填項。
*/

> 操作說明：
> 滑鼠點選，單選

示例：

<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&http://www.cppcns.com
 
gt;
        )
    })}
</MouseMultiples>

> 說明：

> children 自定義設計，樣式，格子，選中效果等.

> 匯入元件直接包裹已經設計好的列表即可，確保className和incFMkyitemClass一致，確保匯入data-position，和activeClass是否存在高亮樣式。。。

以上就是React滑鼠多選功能的詳細內容，更多關於React滑鼠多選的資料請關注我們其它相關文章！