2

Eu estou usando a lib react-number-format para pegar um valor como moeda formatada em meu form e então salvar ele num estado. Atualmente está dessa forma:

<NumberFormat
      thousandSeparator={true}
      value={form.valor}
      placeholder="R$ ao dia"
      onValueChange={(values) => {
           const { value } = values
           setForm(prev => ({ ...prev, valor: value }))
           }}
      prefix={'R$'}
              />

Funciona muito bem, mas eu gostaria de pegar a referência do input com o hook useRef do React, porém não sei como faria isso nesse componente específico. Eu tentei isso só que não funcionou:

const inputRef = useRef(null)

<NumberFormat
       ref={inputRef}
       thousandSeparator={true}
       placeholder="R$ ao dia"
       prefix={'R$'}
 />

Quando eu logo o inputRef.current.value vem undefined. Alguém sabe como pegar a referência dessa máscara?

1 Resposta 1

3

De acordo com a documentação do próprio componente, como ref é uma propriedade especial do React, você está pegando a referência do componente NumberFormat, e não do input.

Para pegar a referência do input, você pode usar a prop getInputRef:

<NumberFormat getInputRef={inputRef} />
// <NumberFormat getInputRef={(el) => this.inputElem = el} />

A documentação ainda cita que, se você utilizar um input customizado, deve pegar a referência de outra maneira:

<NumberFormat inputRef={inputRef} customInput={TextField} />
// <NumberFormat inputRef={(el) => this.inputElem = el} customInput={TextField} />

Agora que você tem a referência correta ao input, pode obter o valor :)

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .