1 - Introdução 2 - Criando projeto 3 - Gerando tabela 4 - Estruturando projeto 5 - Configurando repositório 6 - Configurando controle 7 - Modelo para validar requisições 8 - Serviço para listar produtos 9 - Rota para listar produtos 10 - Serviço para cadastrar produtos 11 - Rota para cadastrar produtos 12 - Serviço para alterar produtos 13 - Rota para alterar produtos 14 - Serviço para remover produtos 15 - Rota para remover produtos 16 - Cors 17 - Criando projeto React 18 - Criando componentes no React 19 - Estrutura de formulário no React 20 - Estrutura de tabela no React 21 - Estilizando componentes 22 - Visibilidade dos botões 23 - Obtendo os produtos 24 - Exibindo os produtos na tabela 25 - Objeto produto 26 - UseState de produto 27 - Obtendo dados do formulário 28 - Cadastrar produtos 29 - Limpar formulário 30 - Selecionar produto 31 - Cancelando alteração e exclusão 32 - Remover produto 33 - Alterar produto 34 - Considerações finais

27 - Obtendo dados do formulário

Nessa vigésima quinta parte do nosso tutorial de Spring Boot e React, iremos criar nosso objeto responsável por manipularmos uma informação do tipo produto.

Iremos implementar no arquivo App.js o envio dos states via formulário utilizando props:

  // Obtendo os dados do formulário
const aoDigitar = (e) => {
  setObjProduto({...objProduto, [e.target.name]:e.target.value});
}

// Retorno
  return (
    <div>
      <Formulario eventoTeclado={aoDigitar} obj={objProduto} />                                   
      <Tabela vetor={produtos} /> 
    </div>
);

No arquivo Formulario.js, teremos a seguinte estrutura:

function Formulario({botao, eventoTeclado}){
    return(
        <form>
            <input type='text' value={obj.nome} onChange={eventoTeclado} name='nome' placeholder='Nome'  className='form-control' />
            <input type='text' value={obj.marca} onChange={eventoTeclado} name='marca' placeholder='Marca' className='form-control' />

            {
                botao
                ?
                <input type='button' value='Cadastrar' onClick={cadastrar} className='btn btn-primary' />
                :
                <div>
                    <input type='button' value='Alterar'  className='btn btn-warning' />
                    <input type='button' value='Remover'  className='btn btn-danger' />
                    <input type='button' value='Cancelar' className='btn btn-secondary' />
                </div>
            }
            
        </form>
    )
}

export default Formulario;

Acompanhe o vídeo para implementar essa etapa do nosso tutorial: