-2
This is my code from the General Data tab
import { Field, Form, Formik } from "formik";
import React, { useState } from "react";
import { SearchCep } from "../../../../../_metronic/_assets/js/components/SearchCEP";
import { ContactTabDadosGerais } from "./ContactTabDadosGerais";
import { ResponsibleTabGerais } from "./ResponsibleTabGerais";
import { UploadPhotoClient } from "./UploadPhotoClient";
export function TabDadosGerais() {
// eslint-disable-next-line
const [nome, setNome] = useState();
function onSubmit(values) {
console.log('SUBMIT', values);
}
return (
<>
<Formik
onSubmit={onSubmit}
initialValues={{
foto: '',
nome: '',
fantasia: '',
cnpj: '',
inscricaomunicipal: '',
inscricaoestadual: '',
}}
>
{() => (
<Form>
<div className="row">
<div className="row">
<div className="form-group mb-0">
<UploadPhotoClient />
</div>
<div className="col-10 mb-0">
<div className="row">
<div className="form-group col-sm-7">
<label>Nome</label>
<Field
className="form-control input-boder-color"
required
name="nome"
type="text"
placeholder="Nome ou Razão Social do contato"
value={nome}
/>
</div>
<div className="form-group col-sm-3">
<label>Tipo de Pessoa</label>
<Field className="form-control input-boder-color" component="select" name="tipodepessoa">
<option value="pessoajuridica">Pessoa Jurídica</option>
<option value="Pessoafisica">Pessoa Física</option>
</Field>
</div>
<div className="form-group col-sm-3">
<label>Fantasia</label>
<Field className="form-control input-boder-color" required name="fantasia" type="text" />
</div>
<div className="form-group col-sm-3">
<label>CNPJ</label>
<Field className="form-control input-boder-color" required name="cnpj" type="text" />
</div>
<div className="form-group col-sm-3">
<label>inscrição Munipal</label>
<Field className="form-control input-boder-color" required name="IM" type="text" />
</div>
<div className="form-group col-sm-3">
<label>Inscrição Estadual</label>
<Field className="form-control input-boder-color" required name="inscricaoestadual" />
</div>
<div className="form-group col-sm-3">
<label>Contribuinte</label>
<Field className="form-control input-boder-color" name="contribuinte" component="select">
<option value="0">0 - Não Informado</option>
<option value="1">1 - Contribuinte ICMS</option>
<option value="2">2 - Contribuinte Isento de Inscrição no cadastro de Contribuinte do ICMS</option>
<option value="9">9 - não contribuinte, que pode ou nao Possuir Inscrição Estadual no Cadastro de Contribuinte do ICMS</option>
</Field>
</div>
<div className="form-group col-sm-3">
<label>Tipo de Contato</label>
<Field className="form-control input-boder-color" name="tipocontato" component="select">
<option value="">Selecione</option>
<option value="pessoaF">Pessoa Física</option>
<option value="pessoaJ">Pessoa Jurídica</option>
<option value="fprnecedor">Fornecedor</option>
<option value="transportadora">Transportadora</option>
</Field>
</div>
<div className="form-group col-sm-3">
<label>Tipo de Cadastro</label>
<Field className="form-control input-boder-color" name="tipocadastro" component="select">
<option value="normal">Normal</option>
<option value="crediario">Crediário</option>
</Field>
</div>
</div>
</div>
</div>
</div>
<hr />
</Form>
)}
</Formik>
<h3 className="page-header first">Endereço</h3>
<SearchCep />
<ContactTabDadosGerais />
<ResponsibleTabGerais />
</>
);
}
Reset because the component is mounted again. You will need to make use of the
initialValues
.– Rafael Tavares
could make an example for me friend
– Everson Ramiro