- Utilizando o hook useState (tradicional)
Arquivo: form.js
import React, { useState } from 'react';
const Form = () => {
const [nome, setNome] = useState('');
const [sobrenome, setSobreome] = useState('');
const submitHandler = e => {
e.preventDefault();
alert(`Nome completo: ${nome} ${sobrenome}`);
setNome('');
setSobreome('');
};
return (
<div>
<form onSubmit={submitHandler}>
<div>
<label>Nome:</label>
<input value={nome} onChange={e => setNome(e.target.value)} />
</div>
<div>
<label>Sobrenome:</label>
<input value={sobrenome} onChange={e => setSobreome(e.target.value)} />
</div>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default Form;
- Utilizando o hook useForm (personalizado/custom)
