Vytváření formulářů pomocí UseForm

Přečtěte si to v angličtině:https://www.useform.org/

Nejprve bych rád řekl, že jsem neměl v úmyslu vytvořit balíček npm pro zpracování formulářů, protože se domnívám, že to dokáže velmi dobře pouze API reagovat s jeho háčky, a co víc, většina balíčků formulářů to nezvládne. U složitých objektů přicházejících z backendu je nejjednodušší objekt zploštit a způsobit, že ztratí určitou anatomii. V perfektním scénáři, kde backend poskytuje data v nejjednodušším formátu pro frontend, to není problém, ale když pracujete se složitějšími aplikacemi a s myšlenkou API First, tedy od začátku, API by mělo být jedním z hlavních cílů při vytváření produktu a jeho navrhování pro výkon, a ne nutně přizpůsobené konkrétnímu klientovi (web, mobil, televize).

Pokud se chcete dozvědět více o API, přečtěte si nejprve https://sensedia.com/api/o-que-e-uma-estrategia-api-first/.

V tomto scénáři musíte jako front-end vývojář pracovat na datech mnohem více, abyste mohli sestavit obrazovku.

V posledním produktu, na kterém jsem pracoval, jsem cítil potřebu vytvářet a spravovat formuláře, které obsahovaly objekty s více vrstvami a seznamy, a to mě nenutilo vždy používat značku „form“, což ztěžuje, když chci mít formuláře s několika kroky, a které také nepotřebuji. Přineste mi zpětnou vazbu na některé pole špatně vyplněné až po pokusu o odeslání formuláře, je to velmi otravné a únavné, i když výkonné.
V tu chvíli mě napadla myšlenka vytvořit háček, který by to zjednodušil a stále udržoval dobrý výkon.
Pokud vás projekt zaujal, navštivte repozitář a neváhejte poskytnout zpětnou vazbu, otevřete PR nebo sdílejte.

Přečtěte si dokumentaci https://www.useform.org/

Fork Repository https://github.com/Jucian0/useform

Jak funguje useForm ?

React Data Forms má dva háčky, useForm a useValidation, useValidation je volitelné. Kód je napsán strojopisem.
Hák useForm
useForm přebírá objekt s následujícími volitelnými vlastnostmi:

  • initialValues:jak název napovídá, tato vlastnost přijímá počáteční hodnoty objektu.
  • debounce:tato možnost přijímá číselnou hodnotu, která odpovídá období mezi ukládáním dat ve stavu formuláře a poslední událostí „vstupu“.
  • onChange:Tato možnost přijímá booleovskou hodnotu a signalizuje, že formulář je řízený typ.
  • validace:Tato možnost přijímá ověřovací objekt vytvořený Yup.

Pomocí useForm je možné vytvářet formuláře typů

  • řízený:který aktualizuje stav komponenty při každé změně vstupu.
  • odskok:který drasticky snižuje počet změn stavu formuláře, protože změnu provede pouze v případě, že od posledního výskytu události „input“ uplynula určitá doba.
  • nekontrolované:Chcete-li použít tento formulář, vynechejte ostatní možnosti v objektu, který obdrží useForm. useForm({})

Protokolování vstupu

Některé ze zdrojů přítomných v poli vráceném useForm jsou vstupní a vlastní, tyto funkce jsou zodpovědné za registraci vstupu dat, jsou vstupem pro nativní prvky jsx, jako je reww textare, input, select … pro komponenty, jako je datepicker a Reag-select

   <input {...input({name:"input-name", type:"text", required:true ....})}>
                     /*or*/
   <input {...input("input-name", "text")}>

Další zdroje

UseForm také poskytuje funkce pro odesílání nekontrolovaných formulářů a funkce pro resetování konkrétních vstupů nebo všech vstupů, je důležité si uvědomit, že reset ponechává vstupy s jejich počátečními hodnotami, pokud nebyla při vytváření formuláře definována žádná hodnota, vstupy jsou voidy.
Vytvoření formuláře debounce
Vytvoření formuláře je velmi jednoduché a jak již bylo řečeno, není nutné mít objekt s počátečními hodnotami a ostatní možnosti jsou volitelné podle formuláře, který má být vytvořen.

V tomto příkladu budu mít počáteční hodnotu a vytvořím ověření, pamatujte, že protože formulář je debounce a ověření nastane, kdykoli se změní stav objektu, v tomto příkladu se chybová zpráva objeví v intervalu 0,3 sekundy.
Protože React Data Forms používá tečkovou notaci, je možné použít jakýkoli objekt nebo vlastnosti na jakékoli úrovni.

<input {...input("property.other.0.name...")}/>

const initialValues = {
      name:"Jesse",
      email:"[email protected]",
      pets:["felix"],
      accept:false

   }

   const validation = yup.object().shape({
      name: yup.string().required("This field is required"),
      email: yup.string().email("This field must be a valid e-mail").required("This field is required"),
      pets: yup.array(yup.string().required("This field is required")),
      accept:yup.bool().oneOf([true], 'Field must be checked')
   })

   function ControlledForm(){

      const [{values, reset},{input}] = useForm({debounce:300, initialValues, validation})
      return (
         <>
            <input {...input("name", "text")}/>
            <span>{touched.name && errors.name}</span>
            <input {...input("email" ,"email")}/>   
            <span>{touched.email && errors.email}</span>         
            <input {...input("pets.0" ,"text")}/>     
            <span>{touched.pets?.[0] && errors.pets?.[0]}</span>    
            <input {...input("accept", "checkbox")}/>
            <span>{touched.accept && errors.accept}</span>    
         </>   
      )
   }

Příklad CodeSandbox:

https://codesandbox.io/s/react-data-forms-2u2ju?from-embed

Oficiální dokumentace

Dokumentace se stále vytváří a všechny příspěvky jsou vítány.