useState - Mllara/react-project GitHub Wiki
-O useState é um hook do React;
-Com ele consehuimos manusear o estado de um componente de forma simples;
-Este hook funciona muito bem com eventos;
-Podemos atrelar um evento a mudança de state
Quando trabalha com useState, precisa importar primeiro.
Depois cria-se duas constantes: [name, setName]
name: nome atributo que eu vou resgatar/ler
setName: o que eu vou alterar
Na paste Form
import {useState} from 'react'
function Form(){
function cadastrarUsuario(e){
e.preventDefault()
console.log(`Usuário' ${name} foi cadastrado com a senha: ${password}`)
}
const [name, setName] = useState()
const [password, setPassword] = useState()
return (
<div>
<h1>Meu cadastro</h1>
<form onSubmit={cadastrarUsuario}>
<div>
<label htmlFor="name">Nome:</label>
<input
type="text"
id="name"
placeholder="Digite o seu nome"
onChange={(e) => setName(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">Senha:</label>
<input
type="password"
id="password"
name="password"
placeholder="Digite sua senha"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<input type="submit" value="Cadastrar" />
</div>
</form>
</div>
)
}
export default Form