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).
Agora 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.