React mouse multi-selection function configuration method

Generally, lists have selection functions, and single selection, double selection and multiple selection are very common. In custom loop lists and images, implement mouse single selection, multiple selection, and inverse selection functions.

# React mousemultiples
# React mouse multi-select component

React mouse multi-select component

limitation

> Mainly realizes the effect of mouse multi-selection. Without destroying the original list, the embedded component has the mouse multi-selection function.

npm package address [link](https://www.npmjs.com/package/mousemultiples)

Install

npm i mousemultiples

Using Configuration Items

/**
 * wrapperScroll?: any, // scroll unit 'ID';
 *
  * itemClass: string, // List box general carrying class
 *
  * activeClass?: string, // List box selected class
 *
  * isDataChange: any, // rendered array, detect data changes *
  * activePosition?: any, // Actively select data *
  * onSelected: (pos: any, item: any, data: any) => void, // drag *
  * onSingleSelected?: (pos: any, item: any, data: any) => void, // click *
  * Note: itemClass and children loop box className must be consistent, and the same box must be bound to data-position, which exports the selected unique identification. * Note: Items with question marks are optional, otherwise they are required.
 */

> Operation Instructions:
> Mouse click, single selection
> Ctrl + mouse click, multiple selection, check selection, invert selection
> Ctrl + a Select all
> Drag the mouse to select multiple ranges

Example:

<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>

> Description:

> children custom design, style, grid, selection effect, etc.

> Import the component and directly wrap the designed list, make sure the className and itemClass are consistent, make sure to import data-position, and make sure activeClass has a highlighted style. . .

The above is the detailed content of React mouse multi-selection function. For more information about React mouse multi-selection, please pay attention to other related articles on 123WORDPRESS.COM!