En este artículo, aprenderemos cómo podemos restringir al usuario para que ingrese caracteres hasta cierto límite.
Prerrequisitos: conocimiento sobre reactJs
Creando la aplicación React:
Paso 1: Cree la carpeta del proyecto de reacción, abra la terminal y escriba el comando npm create-react-app nombre de la carpeta, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app.
proyecto npm create-react-app
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
proyecto de disco compacto
Estructura del proyecto:
Enfoque 1: Usar maxLength: Usaremos el atributo maxLength para nuestra entrada. Es lo mismo que el atributo maxlength utilizado para HTML. Restringe al usuario a ingresar caracteres hasta que alcanza el límite de longitud máxima que hemos establecido.
En el archivo App.js, estamos creando un elemento de entrada simple, para poner un nombre con maxLength establecido en 10.
App.js
function App() {
return (
<div className="App">
<label >Name:</label>
<input name="name" type="text" maxLength={10}/>
</div>
);
}
export default App;
Para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Podemos ver que después del décimo carácter no podemos agregar nada más.
Enfoque 2: crear una función onChange: en este enfoque, estamos creando un componente de formulario simple que le pide al usuario que ingrese su nombre de usuario, en el momento en que la longitud del carácter exceda más de 10, se mostrará una alerta.
En este archivo, estamos usando useState, un gancho de reacción para mantener el nombre de usuario del estado. Crearemos una función handleChange que rastreará la longitud del usuario del carácter que está poniendo, aquí ‘e’ es el evento del navegador. Si es igual a 10, aparecerá la alerta o se agregará al estado.
App.js
import React,{useState} from "react";
const Form= () => {
const [userName, setuserName] = useState("");
const handleChange =(e)=>{
// Here we are checking if the length is equal to 10
if(e.target.value.length===10){
window.alert("Username shouldn't exceed 10 characters")
}
setuserName(e.target.value);
}
return (
<div>
<label>
Please enter username:
</label>
<input
name="username"
value={userName}
onChange={ handleChange}
/>
</div>
)
}
function App() {
return (
<div className="App">
<h1>Hey! Geek Welcome</h1>
<Form/>
</div>
);
}
export default App;
Para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
