Kom godt i gang med reager-vælg

Blog

Reager-Vælg er dybt let at bruge dropdown -bibliotek udelukkende bygget til React. Reager-vælg biblioteket tilbyder kraftfulde multi-select, autofuldførelse og AJAX-understøttelse uden besvær. React-selects hovedkraft ligger i dens dynamiske funktioner såsom søgning, filter, asynkroniseret indlæsning, animeret komponent, let tilgængelighed og hurtigere indlæsningstid.



Hvorfor skal vi bruge React-select i React?

  • Håndterer stort datasæt.
  • CSS styling med følelsesstøtte.
  • Enkel tilpasning med API -understøttelse.
  • Håndtering af komponenttilstand er super let.
  • Asynkronisering af dataindlæsning.
  • CSS Animation support til komponenter.

Reager dropdown Vælg eksempel

I denne React -vejledning lærer vi at arbejde med Reager-vælg bibliotek i denne vejledning. Først vil vi konfigurere React JS-projekt, og derefter inde i React-appen installerer vi React-select-biblioteket for at vise dig React Dropdown select-eksempler.

React App Set Up

Kør følgende kommando for at installere React -projekt.



npx create-react-app react-select-tutorial

Kom ind i projektmappen.

cd react-select-tutorial

Kør React -projektet.



aol mail login log ind
npm start

Installer React-Select Library

Kør nu følgende kommando for at installere Reager-Vælg pakke via NPM.

npm install react-select --save ##### or ##### yarn add react-select

Installere Bootstrap 4 fra NPM for at bruge de færdige UI-komponenter.

npm install bootstrap --save ##### or ##### yarn add bootstrap

Importér React-Select Library

Når React-select-biblioteket er installeret, kan vi nu importere reakt-select-modulet i | _+_ | fil. Medtag følgende kode i App.js fil.

src/App.js

neuralt netværk fra bunden i python pdf

I ovenstående kode har vi importeret react-select og Bootstrap 4 moduler i App.js fil. Vi definerede en | _+_ | array og passerede landenavnet sammen med deres respektive landekode. Vi viser disse landes navn, når en bruger klikker på reager -rullemenuen til valg af element ved hjælp af reager-vælg bibliotek.

Vi erklærede | _+_ | metode og videregav HTML -koden inde i den, f.eks. container, række og kolonne fra Bootstrap -biblioteket for at oprette det grundlæggende layout i vores React -app.

Derefter erklærede vi Rullemenuen React select med | _+_ | objekt og inde i optionskoden passerede vi Lande array. Dette vil gøre magien og gengive landene navne, som du kan se på skærmbilledet ovenfor.

Oversigt React-Select Properties

React Dropdown Select tillader let tilpasning, du kan foretage tilpasningen med følgende egenskaber.

Du kan tjekke flere reager-vælg ejendomme her .

Reager Multi Select Dropdown

Her lærer vi at vælge flere værdier i en React -app ved hjælp af dropdown -valgelement. Se nedenfor, hvordan vi kan bruge erMulti prop til at vælge forskellige værdier i en vælg dropdown.

min verizon nulstillede adgangskode
import React, { Component } from 'react'; import Select from 'react-select'; import 'bootstrap/dist/css/bootstrap.min.css'; const Countries = [ { label: 'Albania', value: 355 }, { label: 'Argentina', value: 54 }, { label: 'Austria', value: 43 }, { label: 'Cocos Islands', value: 61 }, { label: 'Kuwait', value: 965 }, { label: 'Sweden', value: 46 }, { label: 'Venezuela', value: 58 } ]; class App extends Component { render() { return ( ); } } export default App

Reager Animeret Multi Select -komponent

Vi kan også tilføje animationen til dropdown-komponenten React-select ved hjælp af følgende kode.

Countries

Konklusion

Endelig er React Dropdown Select Tutorial med React-select er færdig. I denne vejledning forsøgte vi at lære at oprette en forhånds-rullemenu ved hjælp af reager-vælg biblioteket. Jeg håber, at du nød denne vejledning. Overvej den gerne med andre.

Yderligere læsning:

React Native og Apollo GraphQL Tutorial: Byg mobilapps

Reager kogebogen: Avancerede opskrifter til at niveauere din næste app

☞ Firebase -login -funktionalitet fra bunden med React + Redux

☞ Nedbrydning af den sidste monolit

state of the art objektdetektering

☞ 8 mirakuløse måder at styrke dine React -apps på

reager på fuld skærm

React.js Firebase -vejledning: Opbygning af Firestore CRUD -webapplikation

☞ Angular vs React vs Vue: Hvilket er det bedste valg for 2019?

☞ En sammenligning mellem Angular og React

#reactjs #javascript

www.positronx.io

Kom godt i gang med reager-vælg

Reager dropdown Vælg eksempel Tutorial er dagens førende emne. Vi bruger biblioteket kaldet React-select, der indeholder dynamisk søgning/filter, asynkronisering af indstillinger, tilgængelighed og hurtige gengivelsestider. Den har en fleksibel og smuk Select Input-kontrol til ReactJS med multi-select,