Draggin’ og Droppin’ i Reagerer

0
16

Den Reagerer økosystemet gir oss en rekke biblioteker som alle er fokusert på samspillet av dra og slipp. Vi har reagere-if, reagerer-vakre-if, reagerer-dra-n-drop, og mange flere, men noen av dem krever ganske mye arbeid for å bygge selv en enkel dra-og-slipp-demo, og det er noen som ikke gir deg mer kompleks funksjonalitet (f.eks. flere dra-og-slipp-forekomster), og hvis de gjør det, det blir veldig kompleks.

Dette er hvor reagere-sorterbar-hoc kommer inn i bildet.

💡 Denne opplæringen krever grunnleggende kunnskaper om Reagere bibliotek og Reagere kroker.

Dette biblioteket har “HOC” i navnet for en god grunn. Det gir høyere-for komponenter som strekker seg en komponent med dra-og-slipp-funksjonalitet.

La oss gå gjennom en implementering av funksjonene.

Spinne opp et prosjekt

For denne opplæringen vi kommer til å bygge en app med morsomme Gif-filer (fra Chris Gannon!) som kan dras rundt viewport.

GitHub-Repo

La oss lage en enkel app og legge dra-n-slipp-funksjonalitet til det. Vi kommer til å bruke for å lage reagere-app for å starte opp en ny Reagere prosjektet:

npx lage reagere-appen din-prosjekt-navn

La oss nå endre til prosjektet katalogen og installere reagere-sortering-hoc og array-flytte. Sistnevnte er nødvendig for å flytte elementene i en array til ulike posisjoner.

cd-din-prosjekt-navn
garn legge reagere-sorterbar-hoc-utvalg-flytte

Å legge til stiler, data og GIF-komponent

For enkelhets skyld, vi kommer til å skrive alle stiler i vår App.css-filen. Du kan overskrive stiler du har det med de følgende:

.App {
bakgrunn: #1a1919;
color: #fff;
min høyde: 100vh;
polstring: 25px;
text-align: center;
}

.App h1 {
font-size: 52px;
margin: 0;
}

.App h2 {
color: #f6c945;
text-transform: uppercase;
}

.App img {
markøren: ta tak;
høyde: 180px;
bredde: 240px;
}

La oss lage vår stat med Gif-filer. For dette formålet vi skal bruke Reagere innebygde useState kroken:

import Reagere, { useState } fra “reagerer’;

Nå kan du legge følgende før retur uttalelse:

const [gif, setGifs] = useState([
‘https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif’,
‘https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif’,
‘https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif’,
‘https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif’,
]);

Det er på tide å lage vår enkle GIF-komponent. Opprette en Gif.js fil i src-katalogen, og pass på følgende kode:

import Reagere fra “reagerer’;
import PropTypes fra ‘prop-typer’;

const Gif = ({ gif }) => (<img src={gif} alt=”gif” />)

Gif.propTypes = {
gif: PropTypes.strengen.isRequired,
};

eksport standard Gif;

Vi prøver alltid å følge beste praksis mens du skriver koden, og derfor er vi også importere PropTypes for å skrive sjekker.

Import Gif-komponent og legge det til de viktigste App-komponent. Med litt rydde opp, det ser ut som dette:

import Reagere, { useState } fra “reagerer’;
import ‘./Appen.css’;

import Gif fra ‘./Gif’;

const App = () => {
const [gif, setGifs] = useState([
‘https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif’,
‘https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif’,
‘https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif’,
‘https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif’,
]);

retur (
<div className=”App”>
<h1>Dra dem Gif rundt</h1>
<h2>Sett 1</h2>
{gif-filer.kart((gif, i) => <Gif key={gif} gif={gif} />)}
</div>
);
}

eksport-standard-App;

Gå til http://localhost:3000/ for å se hvordan appen ser ut nå:

Et skjermbilde av reagere-sorterbar-hoc-artikkel-app

På dra-n-drop ting

Ok, det er på tide å gjøre vår Gif draggable! Og droppable.

For å starte, trenger vi to HOCs fra reagere-sorterbar-hoc, og arrayMove metode fra tabellen-flytte biblioteket til å endre vårt nye utvalg etter å dra skjer. Vi ønsker at våre Gif-filer for å holde på sine nye stillinger, ikke sant? Vel, det er hva dette kommer til å tillate oss å gjøre.

La oss importere dem:

import { sortableContainer, sortableElement } fra ‘reagere-sorterbar-hoc’;
import arrayMove fra ‘array-flytt’;

Som du kanskje har gjettet, disse komponentene vil være wrappers som vil utsette funksjonalitet som er nødvendig for oss.

  • sortableContainer er en beholder for våre sorterbar elementer.
  • sortableElement er en beholder for hvert enkelt element vi er gjengivelse.

La oss gjøre følgende etter at alle våre import:

const SortableGifsContainer = sortableContainer(({ barna }) => <div className=”gif”>{barna}</div>);

const SortableGif = sortableElement(({ gif }) => <Gif key={gif} gif={gif} />);

Vi har nettopp opprettet en beholder for våre barn elementer som vil bli vedtatt i vår SortableGifsContainer og også opprettet wrapper for en enkelt Gif komponent.
Hvis det er litt uklart for deg, ikke bekymre deg — du vil forstå rett etter at vi gjennomføre det.

💡Merk: Du trenger til å pakke inn barna i en div eller noen annen gyldig HTML-element.

Det er på tide å pakke våre Gif-filer inn i SortableGifsContainer og erstatte Gif-komponent med vår nyopprettede SortableGif:

<SortableGifsContainer aksen=”x” onSortEnd={onSortEnd}>
{gif-filer.kart((gif, i) =>
<SortableGif
// ikke glem å passere indeks prop med element, index
indeks={i}
key={gif}
gif={gif}
/>
)}
</SortableGifsContainer>

Det er viktig å merke seg at du må passere indeksen prop din sorterbar element, slik at biblioteket kan skille mellom elementer. Det er lignende til å legge til nøkler til lister i å Reagere).

Vi legge til aksen fordi våre elementer er plassert horisontalt og vi ønsker å dra dem horisontalt, mens standard er vertikal å dra. Med andre ord, vi er begrensende å dra langs den horisontale x-aksen. Som du kan se har vi også legge til en onSortEnd funksjon, som utløser hver gang vi drar eller sortere våre elementer rundt. Det er, selvfølgelig, mye mer hendelser, men du kan finne mer informasjon i dokumentasjonen som allerede gjør en utmerket jobb med å dekke dem.

Tid til å gjennomføre det! Legg til følgende linje over tilbake uttalelse:

const onSortEnd = ({ oldIndex, newIndex }) => setGifs(arrayMove(gif, oldIndex, newIndex));

Jeg ønsker å forklare en ting: vår funksjon mottatt en gammel og ny indeks av element som ble trukket og, selvfølgelig, hver gang etter at vi flytte elementer rundt vi endre vårt opprinnelige utvalg med hjelp av arrayMove.

Tada! Nå vet du hvordan du kan implementere dra-n-drop i prosjektet. Nå kan du gå og gjøre det! 🎉 🎉 🎉

Hva hvis vi har flere lister av elementer?

Som du kan se, den forrige eksempel var relativt enkel. Du i utgangspunktet pakk hvert av elementene i en sorterbar HOC og vikle den rundt med sortableContainer, og bingo, du har fått grunnleggende dra-og-slipp.

Men hvordan skal vi gjøre det med flere lister? Den gode nyheten er at de reagerer-sorterbar-hoc gir oss en samling prop slik at vi kan skille mellom listene.

For det første bør vi legge til andre rekke Gif-filer:

const [newGifs, setNewGifs] = useState([
‘https://media.giphy.com/media/xiOgHgY2ceKhm46cAj/giphy.gif’,
‘https://media.giphy.com/media/3oKIPuMqYfRsyJTWfu/giphy.gif’,
‘https://media.giphy.com/media/4ZgLPakqTajjVFOVqw/giphy.gif’,
‘https://media.giphy.com/media/3o7btXIelzs8nBnznG/giphy.gif’,
]);

Hvis du ønsker å se dem før vi flytter neste, legge til følgende linjer etter den SortableGifsContainer avsluttende koden:

{newGifs.kart(gif => <Gif key={gif} gif={gif} />)}

Ok, på tide å bytte den ut med en draggable versjon.

Gjennomføringen er den samme som i det første eksemplet i tillegg til én ting — vi har lagt til en samling prop våre SortableGif. Selvfølgelig, du kan komme opp med noen navn for samlingen, bare husk, vi kommer til å trenge det i for våre onSortEnd funksjon.

<h2>Set 2</h2>

<SortableGifsContainer aksen=”x” onSortEnd={onSortEnd}>
{newGifs.kart((gif, i) => <SortableGif index={i} key={gif} gif={gif} samling=”newGifs” />)}
</SortableGifsContainer>

Neste vi trenger for å legge til samlingen prop vår første listen. Jeg har valgt navnet Gif-filer for den første listen, men det er opp til deg!

Nå må vi endre vår onSortEnd funksjon. Vår funksjon mottatt gamle og nye indekser, men vi kan også destructure en samling fra det. Høyre, akkurat det vi har lagt til i vår SortableGif.

Så alt vi trenger å gjøre nå er å skrive en JavaScript-switch-setningen for å se etter navnet på samlingen, og for å endre høyre utvalg av Gif-filer på å dra.

const onSortEnd = ({ oldIndex, newIndex, samling }) => {
bryteren(samling) {
case ‘gif’:
setGifs(arrayMove(gif, oldIndex, newIndex))
break;
case ‘newGifs’:
setNewGifs(arrayMove(newGifs, oldIndex, newIndex))
break;
standard:
break;
}
}

Tid til å sjekke det ut!

Som du kan se, har vi nå to separate lister av Gif og vi kan dra og sortere. Videre, de er selvstendig betydning elementer fra ulike lister vil ikke bli blandet opp.

Akkurat hva vi ønsket å gjøre! Nå vet du hvordan å opprette og håndtere dra og slipp med flere lister. Gratulerer 🎉

Håper du har hatt det så mye som jeg gjorde, å skrive det! Hvis du ønsker å referere til den fullstendige koden, det er alt opp på GitHub her. Hvis du har noen spørsmål, ta gjerne kontakt med meg via e-post.