Forms

Question 1

Formulario:labels para inputs

Answer 1

são atraves do atributo htmlFor

<div>
		<labels htmlFor="name">Nome:</label>
		<inputs type="text" name="name" placeholder="digite o seu nome" />
</div>

Question 2

Formulario: atributo action

Answer 2

Não usamos o atributo pois as funcionalidades serão assincronas

Question 3

Formulario:Label envolvendo o input, recomendado pelo react, não precisa usar o atributo htmlFor e mantem a semantica

Answer 3

<label>
	<span>Nome:</span>
	<inputs type="text" name="name" placeholder="digite o seu nome" />
</label>

Question 4

Formulario:Manipular dados dos inputs

Answer 4

utilizamos o hook useState que é utilizado para controlar o estado da aplicação

import {useState} from React
let [nome, setNome] = useState()
<inputs onChange={(e)=>{setNome(e.target.value)}} type="text" name="name" placeholder="digite o seu nome" />

Question 5

Formulario:Envio de dados

Answer 5

utilizamos o atributo onSubmit para para o envio e controlá-lo através do preventDefault
const handleSubmit = (e) =>{
	e.preventDefault()
	//fazer qualquer coisa aqui, envio http
}

<form onSubmit={handleSubmit}>
	<label>
		<span>nome</span>
		<input id="name" name="name" onChange={setName(e.target.value)} />
		<button type="submit" />
	</label>
</form>

Question 6

Formulario:Controlled inputs

Answer 6

é o two ways data bind do vue, onde eu controle o valor atual e a alteração dele a partir do change, controle de estado ;
basta igualar o valor do input a uma variavel de estado e controlar sua alteraçaõ;

<input id="name" name="name" onChange={setName(e.target.value)} value={name} />

Question 7

Formulario:Resetar campos;

Answer 7

basta alterar as variaveis de estados, limpando-as;

Question 8

Hook useRef

Answer 8

define como controlar um nó do DOM através da referencia, para setar o foco por exemplo.

1 - const nomeInputRef = useRef("");
2 - <input ref={nomeInputRef} />
3 - nomeInputRef.current.focus()/