import { useState } from "react"; export default function App() { const [height, setHeight] = useState('') const handleKeyPressUp = event => { const { value } = event.target setHeight(value) } return ( <input value={height} onKeyPress={handleKeyPressUp} onKeyUp={handleKeyPressUp} /> ); } Pedí usar keypress en lugar de onChange para escuchar el cambio de entrada. Y uso tanto onKeyPress como onKeyUp porque onKeyPress se activa justo antes de que cambie el valor de entrada ( ¿Cómo obtener el texto de un cuadro de texto de entrada durante onKeyPress? ), y también la pulsación de tecla solo se activará para las teclas que producen un valor de carácter. es decir, no se activará al retroceder ( https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event ).
Pero al asignar el valor de height del estado al valor de entrada, la entrada no aceptará ninguna entrada. ¿Por qué el valor de entrada no se actualiza al escribir texto en el campo?
Básicamente, los eventos OnKeyPress le proporcionan la "clave" que se está escribiendo. Usando esas teclas puedes completar tu tarea.
const handleKeyPressUp = (event) => { const { key } = event; let value = height || ""; if (key === "Backspace") { value = value.slice(0, value.length - 1); } else { value = value + key; } setHeight(value); };consulte este enlace para ver la solución de trabajo: https://codesandbox.io/s/nifty-snow-mnrlf?file=/src/App.js:114-389
Nota: el método anterior es una especie de truco y necesita manejar algunos casos de esquina más, se recomienda usar el oyente onChange.
Puedes cambiar así
onChange={(event) => { const { value } = event.target; setHeight(value) }}Supongo que esto se resolverá
En esta situación, prefiera usar onChange en lugar de usar onkeypress o onkeyup trigger.