Draggin och Droppin’ i Reagera

0
14

Den Reagerar ekosystem ger oss en hel del av de bibliotek som alla är inriktade på samspelet genom att dra och släppa. Vi måste reagera-dnd, reagera-vacker-dnd, reagera-dra-n-släpp och många fler, men vissa av dem kräver en hel del arbete för att bygga en enkel dra-och-släpp-demo, och vissa inte förse dig med mer komplexa funktioner (t ex flera av dra och släpp fall), och om de gör det, blir det mycket komplicerat.

Det är där reagera-sorterbara-hoc-kommer in i bilden.

💡 Denna handledning förutsätter grundläggande kunskaper i att Reagera bibliotek och Reagera krokar.

Detta bibliotek har “TILLFÄLLIGA” i sitt namn för en bra anledning. Det ger högre-för komponenter som sträcker sig en komponent med dra och släpp-funktion.

Låt oss gå igenom ett genomförande av dess funktioner.

Snurra upp ett projekt

För denna handledning kommer vi att bygga en app med roliga Gif-bilder (från Chris Gannon!) som kan dras runt det virtuella.

GitHub Repo

Låt oss skapa en enkel app och lägga till dra-n-släpp-funktionalitet till det. Vi kommer att använda för att skapa reagera-appen för att snurra upp en ny Reagera projekt:

npx skapa-reagera-app-dina-projekt-namn

Låt oss nu ändra till projektets katalog och installera reagera-sortering-hoc-och array-flytta. Det sistnämnda behövs för att flytta objekt i en mängd olika positioner.

cd-dina-projekt-namn
garn lägg reagera-sorterbara-hoc-array-flytta

Lägga till stilar, data-och GIF-komponent

För enkelhetens skull kommer vi att skriva alla stilar i vår App.css-fil. Du kan skriva över stilar du har det med följande:

.App {
bakgrund: #1a1919;
color: #fff;
min-height: 100vh;
padding: 25px;
text-align: center;
}

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

.App h2 {
färg: #f6c945;
text-transform: uppercase;
}

.App img {
markören: ta;
height: 180px;
bredd: 240px;
}

Låt oss skapa vår stat med Gif-bilder. För detta ändamål vi kommer att använda Reagera inbyggda useState krok:

importera Reagera, { useState } från ‘reagerar’;

Lägg nu till följande innan return:

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 är dags att skapa vår enkla GIF-komponent. Skapa ett Gif.js fil i src-katalogen och passera i följande kod:

importera Reagerar från ‘reagerar’;
importera PropTypes från “prop-typer’;

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

Gif.propTypes = {
gif: PropTypes.strängen.isRequired,
};

export standard Gif;

Vi försöker alltid att följa bästa praxis när du skriver kod, vilket vi också att importera PropTypes för typkontroll.

Importera Gif komponent och lägga till den till största App komponent. Med lite städa, det ser ut så här:

importera Reagera, { useState } från ‘reagerar’;
import ‘./App.css’;

importera Gif från”. /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’,
]);

avkastning (
<div className=”App”>
<h1>Dra dem Gif runt</h1>
<h2>1</h2>
{gif-bilder.karta((gif, i) => <Gif key={gif} gif={gif} />)}
</div>
);
}

export standard App;

Gå till http://localhost:3000/ för att se hur appen ser ut nu:

En skärmdump av react-sorterbara-hoc-artikel-app

På drag-n-drop grejer

Okej, det är dags att göra våra Gif flyttbara! Och hittas.

För att börja, behöver vi två HOCs från att reagera sorterbara-hoc, och arrayMove metod från array-flytta biblioteket för att ändra vår nya array efter att dra händer. Vi vill att våra Gif: ar för att stanna på sina nya positioner, höger? Tja, det är vad detta kommer att tillåta oss att göra.

Låt oss importera dem:

import { sortableContainer, sortableElement } från ‘reagerar-sorterbara-hoc”;
importera arrayMove från ‘array-flytta’;

Som du kanske har gissat, de komponenter som kommer att vara omslag som kommer att avslöja funktioner som behövs för oss.

  • sortableContainer är en behållare för våra sorterade element.
  • sortableElement är en behållare för varje enskilt element vi gör.

Låt oss göra följande efter alla våra import:

const SortableGifsContainer = sortableContainer(({ barnen }) => <div className=”gifs”>{barnen}</div>);

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

Vi har precis skapat en behållare för våra barn element som skulle överföras i våra SortableGifsContainer och även skapat omslaget för en enkel Gif-komponent.
Om det är lite oklart för dig, ingen fara — du kommer att förstå precis när vi genomföra det.

💡Obs: Du måste svepa ditt barn i en div eller någon annan giltig HTML-element.

Det är dags att avsluta vårt Gif-bilder i SortableGifsContainer och ersätta Gif-komponent med vår nyskapade SortableGif:

<SortableGifsContainer axis=”x” onSortEnd={onSortEnd}>
{gif-bilder.karta((gif, i) =>
<SortableGif
// glöm inte att passera index prop punkt index
index={jag}
key={gif}
gif={gif}
/>
)}
</SortableGifsContainer>

Det är viktigt att notera att du behöver för att klara index prop dina sorterade element så att biblioteket kan skilja objekt. Det är ungefär som att lägga till nycklar till de listor i att Reagera).

Vi lägger till axeln eftersom våra produkter är placerade horisontellt och vi vill dra dem horisontellt, medan standard är vertikalt dra. Med andra ord, vi är begränsande att dra längs den horisontella x-axeln. Som du kan se har vi även lägga till en onSortEnd funktion, som gör att varje gång vi dra eller sortera våra objekt runt. Det finns, naturligtvis, många fler händelser, men du kan hitta mer information i dokumentationen som redan gör ett utmärkt jobb för att täcka dem.

Tid för att genomföra det! Lägg till följande rad ovanför return:

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

Jag vill förklara en sak: vår funktion emot gamla och nya index för objektet som släpades och, naturligtvis, varje gång efter att vi flytta runt objekt ändrar vi vår första array med hjälp av arrayMove.

Tada! Nu vet du hur man genomför drag-n-drop i ditt projekt. Gå nu och gör det! 🎉 🎉 🎉

Vad händer om vi har flera listor med objekt?

Som du kan se föregående exempel var relativt enkel. Du i princip wrap varje objekt i en sorterbar HOC och linda den runt med sortableContainer och bingo, du har fått grundläggande dra och släppa.

Men hur ska vi göra det med flera listor? Den goda nyheten är att reagera-sorterbara-hoc-ger oss en samling prop, så att vi kan skilja mellan listor.

Först bör vi lägga till en andra rad av Gif:

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’,
]);

Om du vill se dem innan vi flyttar nästa, lägg till följande rader efter SortableGifsContainer avslutande taggen:

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

Okej, dags att ersätta den med en flyttbar version.

Genomförandet är den samma som i första exemplet förutom en sak — vi har lagt till en samling prop vår SortableGif. Naturligtvis kan du komma på ett namn för samlingen, kom bara ihåg, vi kommer att behöva det för våra onSortEnd funktion.

<h2>2</h2>

<SortableGifsContainer axis=”x” onSortEnd={onSortEnd}>
{newGifs.karta((gif, i) => <SortableGif index={i} key={gif} gif={gif} collection=”newGifs” />)}
</SortableGifsContainer>

Nästa vi behöver lägga till samlingen prop vår första lista. Jag har valt namnet Gif för första lista av objekt, men det är upp till dig!

Nu måste vi ändra vår onSortEnd funktion. Vår funktion emot gamla och nya index, men vi kan också destructure en samling från det. Precis, exakt det vi har lagt till i vår SortableGif.

Så allt vi behöver göra nu är att skriva en JavaScript-switch-sats för att kontrollera för insamling namn och ändra rätt mängd av Gif-bilder på dra.

const onSortEnd = ({ oldIndex, newIndex, samling }) => {
switch(samling) {
fallet “gif’:
setGifs(arrayMove(gifs”, ” oldIndex, newIndex))
break;
fallet “newGifs’:
setNewGifs(arrayMove(newGifs, oldIndex, newIndex))
break;
standard:
break;
}
}

Dags att kolla upp det!

Som ni kan se, vi har nu två separata listor för Gif och vi kan dra och sortera. Dessutom, de är oberoende vilket innebär poster från olika listor kommer inte att blandas ihop.

Exakt vad vi ville göra! Nu vet du hur du kan skapa och hantera dra och släppa med flera listor av objekt. Grattis 🎉

Hoppas att ni har haft det lika mycket som jag gjorde för att skriva det! Om du vill referera hela koden, det är allt upp på GitHub här. Om du har några frågor, tveka inte att kontakta mig via e-post.