React mouse multi-selection function configuration method

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!

You may also be interested in:
  • Use react-tooltip plugin in JS to display mouse hover box
  • ReactJS implements single-select, multiple-select and reverse-select examples in forms

<<:  MySQL 5.7.18 Archive compressed version installation tutorial

>>:  How to delete an image in Docker

Recommend

react-diagram serialization Json interpretation case analysis

The goal of this document is to explain the Json ...

Sample code for highlighting search keywords in WeChat mini program

1. Introduction When you encounter a requirement ...

Basic usage of UNION and UNION ALL in MySQL

In the database, both UNION and UNION ALL keyword...

Detailed explanation of mysql partition function and example analysis

First, what is database partitioning? I wrote an ...

Sample code for achieving small triangle border effect with pure CSS3+DIV

The specific code is as follows: The html code is...

How to use worm replication in Mysql data table

To put it simply, MySQL worm replication is to co...

Linux lossless expansion method

Overview The cloud platform customer's server...

JavaScript implementation of the Game of Life

Table of contents Concept Introduction Logical ru...

Implementation of React virtual list

Table of contents 1. Background 2. What is a virt...

Detailed explanation of the problem when combining CSS ellipsis and padding

Text truncation with CSS Consider the following c...

You may not know these things about Mysql auto-increment id

Introduction: When using MySQL to create a table,...

Use PSSH to batch manage Linux servers

pssh is an open source software implemented in Py...

Detailed explanation of Vue data proxy

Table of contents 1. What I am going to talk abou...

Detailed tutorial on using Docker to build Gitlab based on CentOS8 system

Table of contents 1. Install Docker 2. Install Gi...