Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse

Im Allgemeinen verfügen Listen über Auswahlfunktionen, wobei Einzelauswahl, Doppelauswahl und Mehrfachauswahl sehr verbreitet sind. Implementieren Sie in benutzerdefinierten Loop-Listen und Bildern die Funktionen für Einzelauswahl, Mehrfachauswahl und inverse Auswahl mit der Maus.

# Reagiere mit Mausmultiples
# React-Maus-Mehrfachauswahlkomponente

React-Maus-Mehrfachauswahlkomponente

Einschränkung

> Realisiert hauptsächlich den Effekt der Mehrfachauswahl mit der Maus. Ohne die ursprüngliche Liste zu zerstören, verfügt die eingebettete Komponente über die Funktion der Mehrfachauswahl mit der Maus.

npm-Paketadresse [Link](https://www.npmjs.com/package/mousemultiples)

Installieren

npm ich mousemultiples

Verwenden von Konfigurationselementen

/**
 * WrapperScroll?: beliebig, // Scroll-Einheit „ID“;
 *
  * itemClass: string, // Allgemeine Listbox-Trading-Klasse
 *
  * activeClass?: string, // Listbox ausgewählte Klasse
 *
  * isDataChange: any, // gerendertes Array, Datenänderungen erkennen *
  * activePosition?: any, // Daten aktiv auswählen *
  * onSelected: (pos: beliebig, item: beliebig, data: beliebig) => void, // ziehen *
  * onSingleSelected?: (pos: beliebig, item: beliebig, data: beliebig) => void, // klick *
  * Hinweis: itemClass und children loop box className müssen konsistent sein und dieselbe Box muss an data-position gebunden sein, welche die ausgewählte eindeutige Identifikation exportiert. * Hinweis: Elemente mit Fragezeichen sind optional, andernfalls sind sie erforderlich.
 */

> Bedienungsanleitung:
> Mausklick, Einzelauswahl
> Strg + Mausklick, Mehrfachauswahl, Auswahl überprüfen, Auswahl umkehren
> Strg + a Alles auswählen
> Ziehen Sie die Maus, um mehrere Bereiche auszuwählen

Beispiel:

<MausMultiples
    WrapperScroll = "Bildkörper klassifizieren"
    itemClass='Auswahlfeld'
    activeClass='Auswahlbox-aktiv'
    aktivePosition={aktivePosition}
    beiAusgewählt={ausgewählt}
    isDataChange={Bildlisten}
    {imageLists.map(item => {
        zurückkehren (
            <div 
            Klassenname="Auswahlfeld" 
            Datenposition = {item.FileId}
            >
                <div Klassenname = "Listenbild"><img src = { item.FileUrl } /></div>
            </div>
        )
    })}
</MouseMultiples>

> Beschreibung:

> individuelles Design, Stil, Raster, Auswahleffekt usw. für Kinder.

> Importieren Sie die Komponente und umschließen Sie die entworfene Liste direkt. Stellen Sie sicher, dass className und itemClass konsistent sind, achten Sie darauf, die Datenposition zu importieren und stellen Sie sicher, dass activeClass einen hervorgehobenen Stil hat. . .

Oben finden Sie den detaillierten Inhalt der React-Maus-Mehrfachauswahlfunktion. Weitere Informationen zur React-Maus-Mehrfachauswahl finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!