Para un entrenamiento, estoy tratando de verificar si el valor de entrada de este código base incluye una "@" cuando onBlur :
<form> <input type='text' name='my_input' value={inputValue} onChange={(e) => setInputValue(e.target.value)} onBlur={(e) => checkEmail(e.target.value)} ></input> <button>Save</button> </form> Por lo tanto, agregué una función para mostrar un <div> debajo del formulario (o al menos debajo del campo de entrada) si no hay "@" en la entrada, pero sin éxito: 🧐
function checkEmail(value) { if (!value.includes('@')) { <div>⚠️ Warning, there is no @, this is not a valid email address.</div>; } } Sabiendo console.log(!value.includes('@')) devolverá verdadero. 😫
¿Alguna pista sobre cómo obtener la <div>⚠️ Warning, there is no @, this is not a valid email address.</div> que se muestra debajo del formulario o entrada cuando la entrada no es válida?
Gracias por adelantado. 🙂
Está devolviendo su JSX en la función checkEmail , lo cual no es del todo correcto. En cambio, lo que desea hacer es tener un indicador que indique si se debe representar la advertencia JSX y configurar una lógica para hacerlo si es cierto. inputValue siendo un estado es realmente útil en este caso, un pequeño operador && debe manejar la función de representación.
<form> ... </form> { inputValue && !inputValue.includes('@') && (<div>⚠️ Warning, there is no @, this is not a valid email address.</div>) } PD: puede deshacerse de onBlur={(e) => checkEmail(e.target.value)} y su método de controlador.