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?