Tengo eventos onChange y onKeyPress para un campo de entrada, donde cuando el usuario presiona enter solo quiero llamar a la API. Y si no hay cambios en el carácter, entonces no quiero activar la llamada a la API.
const [searchValue, setSearchValue] = useState('') handleChange = (e) => { setSearchValue(e.target.value) } handleKeyPress = (e) => { let charCode = event.keyCode; if (charCode === 13) { getData(); } } return( <input onChange={handleChange} onKeyPress={handleKeyPress} /> ) Entonces, si el usuario escribe 'a' y presiona Intro, debería llamar a la API, pero la segunda vez que el usuario presiona Intro, no debería llamar a la API, ya que no se ha cambiado ningún carácter. Entonces, ¿cómo puedo bloquear eso si el valor es el mismo? He comprobado e.target.value !== searchValue dentro de handleKeyPress pero no funcionó
Cualquier ayuda es apreciada
e.target.value !== searchValue : esto no funcionó porque onChange llamará antes y establecerá el último valor en el estado para que onKeyPress siempre sea el mismo.
Intenta hacer así:
const App = () => { const [searchValue, setSearchValue] = React.useState('') const handleKeyUp = ({charCode, target : { value }}) => { if (charCode === 13 && searchValue !=value ) { console.log("get Data") } setSearchValue(value) } return( <input keyup={handleKeyUp}/> ) }