Tenho uma dúvida que não está relacionada com o exemplo da aula, mas se eu tivesse um form e fosse passar os valores dos inputs atraves de um submit para uma outra página, como isso poderia ser feito?
Tenho uma dúvida que não está relacionada com o exemplo da aula, mas se eu tivesse um form e fosse passar os valores dos inputs atraves de um submit para uma outra página, como isso poderia ser feito?
Olá Leonardo, como vai você?
No React, uma maneira comum de passar dados de um formulário para outra página é utilizando o estado do componente e o React Router.
Vou te mostrar um exemplo básico de como isso pode ser feito.
Primeiro, você precisaria criar um estado para cada campo do seu formulário no componente onde ele está. Por exemplo, se você tem um campo de nome e um campo de email, você faria algo assim:
import React, { useState } from 'react';
function Formulario() {
const [nome, setNome] = useState('');
const [email, setEmail] = useState('');
// ...
}
Depois, você precisaria associar esses estados aos campos do formulário, para que eles sejam atualizados toda vez que o usuário digitar algo:
function Formulario() {
// ...
return (
<form>
<input type="text" value={nome} onChange={e => setNome(e.target.value)} />
<input type="email" value={email} onChange={e => setEmail(e.target.value)} />
{/* ... */}
</form>
);
}
Agora, quando o usuário clicar no botão de submit, você precisa prevenir o comportamento padrão do formulário (que é recarregar a página) e usar o React Router para navegar para a outra página, passando os dados do formulário como parâmetros. Para isso, você pode usar o hook useHistory
:
import { useHistory } from 'react-router-dom';
function Formulario() {
// ...
const history = useHistory();
const handleSubmit = (event) => {
event.preventDefault();
history.push('/outra-pagina', { nome, email });
};
return (
<form onSubmit={handleSubmit}>
{/* ... */}
</form>
);
}
Na outra página, você pode usar o hook useLocation
para acessar os dados passados:
import { useLocation } from 'react-router-dom';
function OutraPagina() {
const location = useLocation();
const { nome, email } = location.state;
// ...
}
Espero ter ajudado e bons estudos!