Att Införa Reagera-Former-Processor

Införa Reagera-Former-Processor

Denna blogg syftar till att introducera dig till nya former bibliotek som jag har jobbat på nyligen. Eftersom det finns massor av former bibliotek ut det du behöver antagligen känna till vad som är annorlunda med den här…

  • Har ett behov av att bygga upp former med komplexa relationer mellan fält
  • Vill ha full kontroll över utformningen av det fält i ditt formulär
  • Vill du göra ditt val av område komponenter (ex Material, Bootstrap, Atlaskit, infödda HTML eller ens ditt eget bibliotek)
  • Vill kunna bygga formulär via ett GUI utan att behöva skriva någon kod

namn=22ba>…Förhoppningsvis du är fortfarande med mig.

Bygga Relationer

Reagera-Former-Processor (RFP) fokuserar på att definiera relationer mellan fält snarare än områden själva. Till exempel kan du:

  • Vill du ha ett fält för att endast vara synliga om en annan området har ett visst värde
  • Vill du värdet av att området ingår i det totala värdet av formen när det är synligt
  • Vill att din form för att vara giltigt bara när alla fält är giltig

namn=6a8f>Det finns många andra fall som stöds och de flesta är väl beskrivna i handledning i online demo.

Hur man Använder Det

RFP gör som används i nytt sammanhang API som infördes Reagera 16.3 för att ge två huvudkomponenter: Formulär och FormFragment. Som standard fält kommer att göras med hjälp av inhemska HTML-element men du kan även tillhandahålla en renderare för en rikare upplevelse. I skrivande stund finns Atlaskit och Material-UI renderare men mer kommer att läggas till i framtiden och det är otroligt enkelt att skriva din egen (det är helt enkelt en fråga om kartläggning väl definierade attribut till rekvisita av önskad komponent för varje typ av fält som du vill göra).

Du sedan ger Formulär – komponent med en JSON definition som anger vilka fält som ska göras och förhållandet mellan dem. Om du vill ha din områden (till exempel i flikar, kolumner, avsnitt, etc) så att du kan dela den definition över flera FormFragment kapslade komponenter någonstans inom Formulär komponent.

Form Builder

för Att göra det ännu lättare kan du skapa JSON specifika för din form med Form Builder funktionen i online-demo. Detta ger dig en förhandsvisning av den form som du bygger samt visning JSON specifikation för dig att kopiera och klistra in i din ansökan.

Alternativ Hantering

Statisk alternativ kan anges i JSON-modell, men om du behöver alternativ för att vara mer dynamisk (t ex hämtas från en server eller uppdateras baserat på förändrade värden i andra fält). I online demo du kan se ett exempel på detta, där en ‘Medlemmar' i ‘Enhetlig Definition” – fliken hämtar tecken från SWAPI.

Detta fler avancerade alternativ hantering kan uppnås genom att ge din Formulär – komponent med en optionsHandler prop det är en funktion som accepterar den nuvarande formen värde och för att skapa val för och kan gå antingen ett Löfte eller en uppsjö av alternativ.

Validering

för Närvarande finns det 4 grundläggande validatorerna för hantering av:

  • Reguljära uttryck mönstermatchning
  • Minsta tecken
  • Max tecken
  • Lägsta och/eller högsta numeriska värden

namn=06b6>…som kan blandas och matchas som behövs. I framtiden ytterligare validatorerna kommer att läggas som stöd för en anpassad validering hanterare för att ges som en prop.

Sammanfattning

jag skulle verkligen älska att få lite feedback på vad jag har gjort hittills för att veta huruvida det är ett projekt som jag bör fortsätta att utveckla. Jag är övertygad om att det skulle vara nyttigt för applikationsutveckling som det tar upp konkreta använda-fall som jag har stött på tidigare.

prova online demo eller installera NPM paket och prova i din egen ansökan och låt mig veta vad du tycker, antingen bra eller dåligt!