Frames

Sample Form

0
1import React, { useState, useContext, useEffect } from 'react';
2import ContactContext from '../../context/contact/contactContext';
3
4const ContactForm = () => {
5 const contactContext = useContext(ContactContext);
6
7 const { addContact, updateContact, clearCurrent, current

Quando se trata de uma edição, terá o valor a settar no formulário. Na criação, será null

} = contactContext;
8
9 useEffect(() => {
10 if (current !== null) {
11 setContact(current);
12 } else {
13 setContact
Na criação, o current será null e devemos settar o valor o formulário com um valor default inicial (que devia estar numa constante)
({
14 name: '',
15 email: '',
16 phone: '',
17 type: 'personal'
18 });
19 }
20 }, [contactContext, current]);
21
22 const [contact
Temos o valor do form como state local.
, setContact] = useState({
23 name: '',
24 email: '',
25 phone: '',
26 type: 'personal'
27 });
28
29 const { name, email, phone, type } = contact;
30
31 const onChange
Método único que trata todos os valores do form. IMPORTANTE: todos os elementos do form têm que ter um "name" associado
= e =>
32 setContact({ ...contact, [e.target.name]: e.target.value });
33
34 const onSubmit
Método de submissão do form, verifica se estamos em criação/edição e é onde devemos fazer validações
= e => {
35 e.preventDefault();
36 if (current === null) {
37 addContact(contact);
38 } else {
39 updateContact(contact);
40 }
41 clearAll();
42 };
43
44 const clearAll = () => {
45 clearCurrent();
46 };
47
48 return (
49 <form onSubmit={onSubmit}>
50 <h2 className='text-primary'>
51 {current ? 'Edit Contact' : 'Add Contact'}
52 </h2>
53 <input
54 type='text'
55 placeholder='Name'
56 name='name'
57 value={name}
58 onChange={onChange}
59 />
60 <input
61 type='email'
62 placeholder='Email'
63 name='email'
64 value={email}
65 onChange={onChange}
66 />
67 <input
68 type='text'
69 placeholder='Phone'
70 name='phone'
71 value={phone}
72 onChange={onChange}
73 />
74 <h5>Contact Type</h5>
75 <input
76 type='radio'
77 name='type'
78 value='personal'
79 checked={type === 'personal'}
80 onChange={onChange}
81 />{' '}
82 Personal{' '}
83 <input
84 type='radio'
85 name='type'
86 value='professional'
87 checked={type === 'professional'}
88 onChange={onChange}
89 />{' '}
90 Professional
91 <div>
92 <input
93 type='submit'
94 value={current ? 'Update Contact' : 'Add Contact'}
95 className='btn btn-primary btn-block'
96 />
97 </div>
98 {current && (
99 <div>
100 <button className='btn btn-light btn-block' onClick={clearAll}>
101 Clear
102 </button>
103 </div>
104 )}
105 </form>
106 );
107};
108
109export default ContactForm;
110