0

Estou tentando pegar o evento onChange nativo do navegador, visto que o onChange do React é executado a cada tecla pressionada pelo usuário. É possível implementar isso?

O evento nativo acredito eu que ocorra da seguinte forma: usuário apertou enter ou saiu do campo atual (blur).

A única alternativa que encontrei até o momento foi combinar os eventos onChange, onBlur e onKeyDown, ficando semelhante a isso:

import React, { useEffect, useRef, useState } from 'react';
import { Input } from 'reactstrap';
import PropTypes from 'prop-types';

export function InputText({
  value: userValue,
  onChange: userOnChange,
  onBlur: userOnBlur,
  onKeyDown: userOnKeyDown,
  ...props
}) {
  const [value, setValue] = useState('');
  const hasChanges = useRef(false);

  useEffect(() => {
    setValue(userValue);
  }, [userValue]);

  function dispatchChange(event) {
    if (hasChanges.current) {
      hasChanges.current = false;

      if (userOnChange) {
        userOnChange(event);
      }
    }
  }

  function onChange(event) {
    setValue(event.target.value);
    hasChanges.current = true;
  }

  function onBlur(event) {
    dispatchChange(event);

    if (userOnBlur) {
      userOnBlur(event);
    }
  }

  function onKeyDown(event) {
    if (event.keyCode === 13) {
      dispatchChange(event);
    }
    if (userOnKeyDown) {
      userOnKeyDown(event);
    }
  }

  return (
    <Input
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      onKeyDown={onKeyDown}
      {...props}
    />
  );
}

InputText.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]).isRequired,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  onKeyDown: PropTypes.func
};

Dessa forma, eu tenho um comportamento parecido. Isso me parece "gambiarra". Existe alguma forma de obter o mesmo comportamento de forma mais simples?

1
  • Usa o campo input do HTML ao invés de ser um componente. Commented 4/11/2019 às 11:39

1 Resposta 1

0

Basta usar o onBlur ao invés de onChange. Exemplo:

onChange(event) {
  console.log(event); // só irá emitir esse evento, ao sair do campo
}

...

return (
  <Input
    value={value}
    onBlur={onChange}
    {...props}
  />
);

Recomendo também, fazer uma verificação para saber se o valor mudou, caso usuário tenha apenas clicado no campo e não escrito nada.

Obs: lembrando que é apenas um jeito de resolver o problema, mas não quer dizer que é certo, o React usa o onChange dessa forma, para próprio componente ter controle do estado e dos valores e não o browser.

3
  • Entendo que o onChange do React é feito para controlar o estado do componente. O problema é que aparentemente não tem uma forma pegar o evento apenas quando o usuário dar enter ou sair do campo sem usar outros eventos. No VueJS eu costumo colocar o atributo `@change.native="myFunction" e funciona muito bem. Esse tipo de coisa é um ponto que me deixa bem desanimado quanto ao React... De toda forma obrigado pela resposta!
    – Raphael
    Commented 4/11/2019 às 13:22
  • Sim, só quis deixar claro que não era certo e nem errado, era um jeito haha. Mas eu entendo, mas desanima não, React tem muitas coisas legais e toda linguagem querendo não vai ter algumas partes que não gostamos, mas a gente foca nas legais haha! Valeu! Commented 4/11/2019 às 15:20
  • @Raphael não esquece de votar ou colocar a resposta como aceita se te ajudou :) Commented 6/11/2019 às 17:00

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 .