Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Javascript e objetos

por Denis Ivan Correia
| 55.6k xp | 92 posts
Programador Front-end

Bom dia, Ao fazer os exercícios sempre salvava informações direto em variáveis separadas por exemplo:

Declarava elas no State:

 this.state = {
      bancoCodigo: '',
      bancoNome: "",
      bancoAgencia: '',
      bancoConta:'',
      bancoDv: 1,
      bancoAtivo: 1,
      bancoEmpresa: ''

Usava o onChange para colocar valores do input nelas:

 <div className="col-lg-12">
     <input onChange={(e) => this.setState({ bancoEmpresa: e.target.value })} name="empresa"></input>
 </div>

<div className="col-lg-12">
     <input onChange={(e) => this.setState({ bancoNome: e.target.value })} name="nome"></input>
 </div>

Porem quero fazer de um jeito mais organizado, por exemplo quero ter um Objeto Banco, e esse objeto ter as propriedades CODIGO, NOME, AGENCIA etc.

Então pensando nisso, declarei um objeto da seguinte forma: (Não sei se esta certo)

 var banco = {}

Depois disso coloquei os valores em suas propriedades:

var banco = {}
    banco.id = this.state.bancoId;
    banco.empresa = this.state.bancoEmpresa;
    banco.codigo = this.state.bancoCodigo;
    banco.nome = this.state.bancoNome;
    banco.agencia = this.state.bancoAgencia;
    banco.conta = this.state.bancoConta;
    banco.dv = this.state.bancoDv;
    banco.ativo = this.state.bancoAtivo;

Porem dessa forma fica meio estranho, pois tenho o trabalho de digitar passando do INPUT para o State:

 <input onChange={(e) => this.setState({ bancoEmpresa: e.target.value })} name="empresa"></input>

e depois do state para o objeto:

var banco = {}
 banco.empresa = this.state.bancoEmpresa;

Não teria uma maneira de colocar os valores no objeto direto pelo onChange ?

2 respostas
por Vagner Ferreira Santos
| 239.2k xp | 10 posts

Acho que uma solução para você, seria colocar o banco dentro do próprio state.

this.state = {
    banco: {
        id: 1,
        empresa: 'x'
    }
}

E talvez tirar a lógica do template, passando apenas uma função nela. Algo como:

<input onChange={this.atualizaEmpresa} name="empresa"></input>

E criar o método atualizaBanco no seu componente:

atualizaEmpresa(e) {
    const novoObjBanco = Object.create(this.state.banco);
     novoObjBanco.empresa = e.target.value;
    this.setState({ banco:  novoObjBanco})
}

O que acha?

solução!
por Denis Ivan Correia
| 55.6k xp | 92 posts
Programador Front-end

Obrigado, Levei em conta sua ideia e ficou assim:

this.state = {
    banco: {}
}

Input:

<input onChange={(e) => { this.updateBanco('empresa', e.target.value) }} name="empresa"></input>
 <input onChange={(e) => { this.updateBanco('codigo', e.target.value) }} name="codigo"></input>

Metodo:

  updateBanco = (prop, value) => {
    let b = this.state.banco;
    b[prop] = value;
    this.setState({ banco: b });
    //b = prop += value;
  }

Deu certo !

Muito obrigado