-1

Olá, Sou novo em React tenho um Componente Home que possui um Formulário gostaria de saber como faço para pegar os inputs deste form e passar via get para outro componente: Nas rotas passei assim

<Route exact path="/listagem/:inicial/:final/:ordem" component={Listagem} />

Home URL URL

import React from "react";
import React-Router-Dom from "react-router-dom";

const Home = () => {
 
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5 ">
        <h2 className="text-center mb-4">Consulta Cadastro</h2>
        <form>
        <div className="row">
          <div className="col-md-6 mb-3">
            <label for="firstName" className="font-weight-bold">Data Inicial</label>
            <input type="date" class="form-control" name="inicial" />
          </div>
          <div className="col-md-6 mb-3">
            <label for="lastName" className="font-weight-bold">Data Final</label>
            <input type="date" class="form-control" name="final" />
          </div>
        </div>
        <hr class="mb-4" /> 
        <h4 class="mb-3">Ordem do Relatório</h4>
        <div class="row">
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="codigo" />
            <label class="form-check-label">
              Ordenar por Código
            </label>
            </div>
          </div>
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="produto" />
            <label class="form-check-label">
              Ordenar por Produto
            </label>
            </div>
          </div>
          <div class="col-md-4 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="ordem" value="periodo" />
            <label class="form-check-label">
              Ordenar por Período
            </label>
            </div>
          </div>
        </div>
          <button className="btn btn-primary btn-block">Buscar</button>
        </form>
      </div>
    </div>
  );
};

export default Home;

Devo passar no Onclick tipo assim ::

<button onclick={listagem/:inicial/:final/:ordem} className="btn btn-primary btn-block">Buscar</button>

1 Resposta 1

0

A primeira parte seria:

  • Definir states para armazenar o valor de cada input do formulário.

Depois de ter cada state, você teria que escolher:

  • Passar o state para o componente que deseja usar (parecido com um post)
  • Ou passar via parâmetro de URL (como se fosse um get) ai sim usaria a ideia do url.com/param1/param2, isso só daria certo se os dados fossem simples, existem varias limitações em parâmetros GET e normalmente as coisas não são feitas assim no React.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .