native onChange on React

Asked

Viewed 382 times

0

I’m trying to catch the event onChange native of the browser, since the onChange React is executed with each key pressed by the user. It is possible to implement this?

The native event I believe occurs as follows: user pressed enter or left the current field (Blur).

The only alternative I’ve found so far is to combine the events onChange, onBlur and onKeyDown, being similar to this:

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
};

In this way, I have a similar behavior. It seems to me "gambiarra". Is there any way to get the same behavior in a simpler way?

  • Use the HTML input field instead of being a component.

1 answer

0

Just use the onBlur instead of onChange. Example:

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

...

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

I also recommend doing a check to see if the value has changed, in case user has just clicked on the field and not written anything.

Note: remembering that it is only a way to solve the problem, but it does not mean that it is right, React uses the onChange so that the component itself has control of the state and values and not the browser.

  • I understand that the onChange React is designed to control the state of the component. The problem is that apparently there is no way to catch the event only when the user enters or leaves the field without using other events. In Vuejs I usually put the attribute `@change.Native="myFunction" and it works very well. This kind of thing is a point that makes me very discouraged about React... Anyway thank you for the answer!

  • Yeah, I just wanted to make it clear that it wasn’t right or wrong, it was a haha way. But I understand, but don’t be discouraged, React has a lot of cool stuff and all the language wanting won’t have some parts that we don’t like, but we focus on the cool haha! Thanks!

  • @Raphael does not forget to vote or put the answer as accepted if it helped you :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.