1
resposta

Passar dados de um form para outra página

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?

1 resposta

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software