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

Vue implements nested routing method example

1. Nested routing is also called sub-routing. In ...

CSS stacking and z-index example code

Cascading and Cascading Levels HTML elements are ...

Detailed explanation of MySQL redo log (redo log) and rollback log (undo logo)

Preface: The previous article described several c...

Super simple implementation of Docker to build a personal blog system

Install Docker Update the yum package to the late...

Vue realizes adding watermark to uploaded pictures (upgraded version)

The vue project implements an upgraded version of...

Implementation of vue+drf+third-party sliding verification code access

Table of contents 1. Background 2. Verification p...

Detailed explanation of cross-usage of Ref in React

Table of contents 1. First, let’s explain what Re...

Analysis of JavaScript's event loop mechanism

Table of contents Preface: 1. Reasons for the eve...

MySQL trigger detailed explanation and simple example

MySQL trigger simple example grammar CREATE TRIGG...

A brief discussion on the differences between FTP, FTPS and SFTP

Table of contents Introduction to FTP, FTPS and S...

Steps to enable MySQL database monitoring binlog

Preface We often need to do something based on so...

Detailed explanation of three solutions to the website footer sinking effect

Background Many website designs generally consist...

JavaScript typing game

This article shares the specific code of JavaScri...