0
respostas

Como posso formatar dados de um state?

Estou fazendo um site de organização financeira, integrado com Sql Server para receber dados. O tipo dos valores que são dinheiro, está como Numeric no banco, assim na web recebia os valores nesse formato (ex: 2500.25). Depois formatei para o formato brasileiro para ficar mais agradável ao usuário (ex: R$ 2.500,25).

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeAgora como posso filtrar e remover alguns valores para poder salvar novamente e não dar erro no backend ? (Exemplo: R$ 2.500,25 para 2500.25).

Código do input dos valores:

 <label> Valor do Ativo: </label>
                <input
                    type="text"
                    id="valorGanho"
                    placeholder="Valor do Ganho"
                    className="form-input"
                    name="valorGanho"
                    onInput={e => this.mascaraMoeda(e)}

                    value={this.state.ganho.valorGanho}

                    onChange={e => this.atualizaCampo(e)}
                />

Código em que os valores são formatados:

mascaraMoeda(event) {
    const onlyDigits = event.target.value
        .split("")
        .filter(s => /\d/.test(s))
        .join("")
        .padStart(3, "0")
    const digitsFloat = onlyDigits.slice(0, -2) + "." + onlyDigits.slice(-2)
    event.target.value = this.maskCurrency(digitsFloat)
}

maskCurrency(valor, locale = 'pt-BR', currency = 'BRL') {
    return new Intl.NumberFormat(locale, {
        style: 'currency',
        currency
    }).format(valor)
}

Código do método atualizaCampo e dos que são chamados quando clico em salvar:

salvar() {
    const ganho = this.state.ganho
    const metodo = ganho.id ? 'put' : 'post'
    const url = ganho.id ? `${urlAPI}/${ganho.id}` : urlAPI

    axios[metodo](url, ganho)
        .then(resp => {
            const lista = this.getListaAtualizada(resp.data)
            this.setState({ ganho: initialState.ganho, lista })
        })
}

getListaAtualizada(ganho, add = true) {
    const lista = this.state.lista.filter(g => g.id !== ganho.id)
    if (add) lista.unshift(ganho)
    return lista
}

atualizaCampo(event) {
    const ganho = { ...this.state.ganho }
    ganho[event.target.name] = event.target.value
    this.setState({ ganho })
}

Já tentei no método atualizaCampo adicionar o método replace na variável ganho, mas sem sucesso.