React 마우스 다중 선택 기능 구성 방법
# 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, // ，
*
* activePosition?: any, //
*
* onSelected: (pos: any, item: any, data: any) => void, //
*
* onSingleSelected?: (pos: any, item: any, data: any) => void, //
*
* ：itemClass children 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 사용자 정의 디자인, 스타일, 칸, 선택 효과 등.
> 구성 요소를 가져와 이미 설계된 목록을 직접 감싸면 됩니다.className과 itemClass가 일치하는지 확인하고, 데이터-position을 가져와서,activeClass와 밝은 스타일이 있는지 확인하십시오.
이상은 React 마우스 다중 선택 기능에 대한 상세한 내용입니다. React 마우스 다중 선택에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
