Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:07 [2022/05/13 20:51] alexandru.hogea [2. Fisier de configurare rute] |
pw:laboratoare:07 [2022/05/13 21:01] (current) alexandru.hogea [Formulare] |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| ===== Ce veti invata la acest laborator? ===== | ===== Ce veti invata la acest laborator? ===== | ||
| Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul. | Cum sa interactionati cu un server, cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul. | ||
| + | |||
| + | ===== Inainte de integrarea frontend-backend ===== | ||
| + | ==== Actualizarea formularelor ==== | ||
| + | <note important>Au fost actualizate formularele astfel incat sa foloseasca biblioteca[[https://react-hook-form.com/|react-hook-form]]. Aceasta biblioteca ne scuteste de gestionarea fiecarui input din cadrul formularelor.</note> | ||
| + | |||
| + | Mai jos puteti vedea un exemplu din documentatia celor de la react-hook-form. Cel mai important feature este **register** care paseaza urmatoarele proprietati fiecarui input: | ||
| + | * onChange | ||
| + | * name | ||
| + | * onBlur | ||
| + | * ref | ||
| + | |||
| + | Prin aceste proprietati, se vor actualiza campurile, valorile finale fiind returnate de **getValues()**. | ||
| + | <code> | ||
| + | import React from "react"; | ||
| + | import { useForm } from "react-hook-form"; | ||
| + | |||
| + | export default function App() { | ||
| + | const { register, handleSubmit, watch, formState: { errors } } = useForm(); | ||
| + | const onSubmit = data => console.log(data); | ||
| + | |||
| + | console.log(watch("example")); // watch input value by passing the name of it | ||
| + | |||
| + | return ( | ||
| + | /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ | ||
| + | <form onSubmit={handleSubmit(onSubmit)}> | ||
| + | {/* register your input into the hook by invoking the "register" function */} | ||
| + | <input defaultValue="test" {...register("example")} /> | ||
| + | | ||
| + | {/* include validation with required or other standard HTML validation rules */} | ||
| + | <input {...register("exampleRequired", { required: true })} /> | ||
| + | {/* errors will return when field validation fails */} | ||
| + | {errors.exampleRequired && <span>This field is required</span>} | ||
| + | | ||
| + | <input type="submit" /> | ||
| + | </form> | ||
| + | ); | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | <note>Desi pentru aceasta aplicatie nu am pus mesajele de eroare, va recomandam sa aveti intotdeauna un raspuns pe care sa il dati utilizatorilor care nu completeaza corect. Greselile facute de oameni in interactiunea cu un program nu sunt 'human error', sunt bad design.</note> | ||
| ===== Ce este Axios? ===== | ===== Ce este Axios? ===== | ||
