Quiero obtener información única del control de input cuando el valor está vacío y cuando el valor no está vacío
En este momento estoy usando onChange como a continuación:
<Input onChange={onChangeValue()} /> Pero este método onChangeValue se ejecuta cada vez que escribo en la entrada, pero quiero información dos veces, primero cuando el valor de la entrada está vacío y segundo cuando el valor de la entrada no está vacío.
¿Puede alguien decirme qué puedo hacer esto?
Puede poner algo de lógica antes de su función onChangeValue() que verifica la longitud del valor de entrada y luego llama a onChangeValue() :
beforeOnChangeValue = function() { if(arguments[0].target.value.length <= 1) return onChangeValue(arguments) } <Input onChange={beforeOnChangeValue} /> De esta manera, la función onChangeValue() solo se llamará cuando la entrada se vacíe o cuando se ingrese el primer carácter.
parece que está usando componentes controlados (cambiando el valor del control en cada tipeo de teclas). Creo que, según su estrategia, podría usar una bandera en el controlador onChange como esta
function onChange (evt) { setIsEmpty(!!evt.target.value); // Your code ... }Entonces siempre sabrás si la entrada está vacía o no.
function Form () { const [isEmpty, setIsEmpty] = React.useState(false); // onChange here return <Input className={isEmpty ? 'empty-class' : 'non-empty-class'} /> }